onchange event not firing on first change in javascript?

Question

<form class="uk-form-stacked">
    <label class="uk-form-label" for="kUI_dropdown_basic_select">Select a user</label>
    <select id="kUI_dropdown_basic_select" class="uk-form-width-medium" onchange="getIPL();">
        <?php  foreach ($response->result->allAcc as $data) { ?>
            <option  value="<?php echo $data->Id;?>">   <?php echo $data->Name; ?></option>
        <?php } ?>
    </select>
</form>


<script>
function getIPL() {
    var urlmenu = document.getElementById( 'kUI_dropdown_basic_select' );
    urlmenu.onchange = function() {
    window.open( 'admin_mailbox.php?Id=' + this.options[ this.selectedIndex ].value,"_self");
    };
}
</script>

Thank you for taking the time for reading my question. onchange() is not working for the first time second time it works fine

It likely is working. The change event just uses multiple handlers at different times. – The first occurrence of change invokes getIPL(), which just replaces itself as the handler with a different function. That 2nd function then opens new windows on each subsequent occurrence of the event. — Jonathan Lonowski
– Jonathan Lonowski, Commented Feb 25, 2016 at 5:58

Mr. Engineer · Accepted Answer · 2016-02-25 06:00:15Z

3

Remove onchange from select box. And change your JS with this :

<script>

    var urlmenu = document.getElementById( 'kUI_dropdown_basic_select' );
    urlmenu.onchange = function() {
    window.open( 'admin_mailbox.php?Id=' + this.options[ this.selectedIndex ].value,"_self");
    };

</script>

edited Feb 25, 2016 at 6:00

answered Feb 25, 2016 at 5:58

Mr. Engineer

3,5254 gold badges20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Medet Tleukabiluly Over a year ago

There is no onclick event

Mr. Engineer Over a year ago

Oh yes it's onchage. Thanks.

devpro Over a year ago

also suggest to add a default <option value="">Select</option> otherwise ist option selected as default and will not work... maybe..

Mr. Engineer Over a year ago

@devpro It works if user will change the value of select box.

devpro · Accepted Answer · 2016-02-25 06:27:49Z

1

When you are using document.getElementById for getting element id, than no need to use onchange() event in <select>

And i also suggest you to add one more option for selection <option>Select</option>

Test Example (change as per your PHP Code):

var urlmenu = document.getElementById( 'kUI_dropdown_basic_select' );
urlmenu.onchange = function() {
window.open( 'admin_mailbox.php?Id=' + this.options[ this.selectedIndex ].value,"_self");    	
};

<form class="uk-form-stacked">
    <label class="uk-form-label" for="kUI_dropdown_basic_select">Select a user</label>
    <select id="kUI_dropdown_basic_select" class="uk-form-width-medium">
        <option value="">Select</option>
        <option value="test1">Test1</option>
        <option value="test2">Test2</option>
    </select>
</form>

edited Feb 25, 2016 at 6:27

answered Feb 25, 2016 at 6:10

devpro

16.1k3 gold badges29 silver badges39 bronze badges

1 Comment

Amreen Over a year ago

Thanks for the help :)

Dhaval Patel · Accepted Answer · 2016-02-25 06:43:43Z

1

Very easy and simple code below

<form class="uk-form-stacked">
   <label class="uk-form-label" for="kUI_dropdown_basic_select">Select a user</label>

   <select id="kUI_dropdown_basic_select" onmousedown="this.value='';" class="uk-form-width-medium" onchange="getIPL(this.value);">
      <option  value="aaa">aaa</option>
      <option  value="bbb">bbb</option>
      <option  value="ccc">ccc</option>
      <option  value="ddd">ddd</option>
   </select>
</form>

javascript function

function getIPL(value) {
  //var urlmenu = document.getElementById( 'kUI_dropdown_basic_select' );
  //urlmenu.onchange = function() {
  window.open( 'admin_mailbox.php?Id=' + value,"_self"); 
  //};
}

edited Feb 25, 2016 at 6:43

answered Feb 25, 2016 at 6:07

Dhaval Patel

1,1066 silver badges20 bronze badges

6 Comments

devpro Over a year ago

this will work alert(value); but not this urlmenu.onchange = function() {

Dhaval Patel Over a year ago

you don't need to use utlmenu.onchange event again...b'coz it's already working for onchange event

Dhaval Patel Over a year ago

just use : window.open( 'admin_mailbox.php?Id=' + value,"_self");

Dhaval Patel Over a year ago

it's so easy, also you can use jquery for same thing

Dhaval Patel Over a year ago

i have added it in answer

|

Vivek Pipaliya · Accepted Answer · 2016-02-25 06:03:51Z

-1

You have already defined onchange event of select box here...then why you use onchange again on same element.

Use following code

<form class="uk-form-stacked">
    <label class="uk-form-label" for="kUI_dropdown_basic_select">Select a user</label>
    <select id="kUI_dropdown_basic_select" class="uk-form-width-medium">
        <?php  foreach ($response->result->allAcc as $data) { ?>
            <option  value="<?php echo $data->Id;?>">   <?php echo $data->Name; ?></option>
        <?php } ?>
    </select>
</form>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  $("#kUI_dropdown_basic_select").change(function(){
        window.open( 'admin_mailbox.php?Id=' + $(this).val() ,"_self");
  });
});
</script>

answered Feb 25, 2016 at 6:03

Vivek Pipaliya

4981 gold badge7 silver badges17 bronze badges

1 Comment

David Over a year ago

You've now introduced jquery into the solution, which needlessly complicates the matter. You do not raise any attention to the fact that you've introduced dependencies with this solution, and it would work quite well with vanilla javascript, as noted by @Mr. Engineer's answer.

Collectives™ on Stack Overflow

onchange event not firing on first change in javascript?

4 Answers 4

4 Comments

1 Comment

6 Comments

Use following code

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

6 Comments

Use following code

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related