CODEWITHSUNDEEP
javascriptphp
Amreen
Amreen

Reputation: 69

onchange event not firing on first change in javascript?

<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

Upvotes: 1

Views: 2039

Answers (4)

Dhaval Patel
Dhaval Patel

Reputation: 1096

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"); 
  //};
}

Upvotes: 1

devpro
devpro

Reputation: 16117

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>

Upvotes: 1

Vivek Pipaliya
Vivek Pipaliya

Reputation: 498

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>

Upvotes: -1

Mr. Engineer
Mr. Engineer

Reputation: 3515

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>

Upvotes: 3

Related Questions