jquery - input type Reset Button Not clearing form perfectly -

here code:

            <form name="f1" method="get">         <r><label for="wlk_logo_align">logo alignment</label><br/> <div class="leftdropdown leftdropdown-dark">         <select id="select1" name="s1" class="leftdropdown-select" >         <option value="default" selected="selected">default         <option value="http://www.java2s.com">java2s.com         <option value="http://www.google.com">google         <option value="http://www.msn.com">msn         <option value="http://www.perl.com">perl.com         <option value="http://www.php.net">php.net         </select>         </div>         </r>         <r><label for="wlk_logo_align">color scheme</label><br/>  <div class="leftdropdown leftdropdown-dark">         <select id="select2" name="s2"  class="leftdropdown-select">         <option value="default" selected="selected">default         <option value="http://www.1.com">1         <option value="http://www.2.com">2         <option value="http://www.3.com">3         <option value="http://www.4.com">4         <option value="http://www.5.net">5 </select> </div> <input type="button" name="go" value="s1 button"  onclick="window.location=document.f1.s1.options[document.f1.s1.selectedindex].value"> <input type="button" name="go" value="s2 button"  onclick="window.location=document.f1.s2.options[document.f1.s2.selectedindex].value"> <button type="reset" class="right" onclick="document.forms['f1'].reset();">reset</button> 

as can see, had use 2 buttons , 1 reset button.

i need correct code use 1 button work both , reset button clear both of them.

here jquery code:

$('#select1').on('change', function(){ if($(this).val() != 'default'){     $('#select2').prop('disabled', true); } else{     $('#select2').prop('disabled', false); } 

});

$('#select2').on('change', function(){ if($(this).val() != 'default'){     $('#select1').prop('disabled', true); } else{     $('#select1').prop('disabled', false); } 

});

for more information, if select google item first list, try use reset button, both of drop downs menus set default, still 1 of them disabled.

i need code reset both of items perfectly, , 1 button work both of them cause had use 2 buttons both of items.

i appropriate on issue.

regards

give shot:

$('#go').on('click',function() {     var whichselect = $('select:enabled');     if(whichselect.length===1) {         alert('let\'s go to: ' + whichselect.get(0).value);         window.location.href=whichselect.get(0).value;     } else {         alert('you have select @ least 1 select dropdown!');     } });  $('#select1').on('change', function(){ if($(this).val() != 'default'){     $('#select2').prop('disabled', true); } else{     $('#select2').removeattr('disabled'); } });  $('#select2').on('change', function(){ if($(this).val() != 'default'){     $('#select1').prop('disabled', true); } else{     $('#select1').removeattr('disabled'); } });  $("button[type='reset']").on("click", function(e) {     e.preventdefault();     // remove disabled attribute on reset     $('#select1,#select2').removeattr('disabled');      // fire off native reset function     $(this).closest('form').get(0).reset(); }); 

and new html:

<form name="f1" method="get">     <label for="wlk_logo_align">logo alignment</label><br>     <div class="leftdropdown leftdropdown-dark">         <select id="select1" name="s1" class="leftdropdown-select" >             <option value="default" selected="selected">default             <option value="http://www.java2s.com">java2s.com             <option value="http://www.google.com">google             <option value="http://www.msn.com">msn             <option value="http://www.perl.com">perl.com             <option value="http://www.php.net">php.net         </select>     </div>     <label for="wlk_logo_align">color scheme</label><br/>     <div class="leftdropdown leftdropdown-dark">         <select id="select2" name="s2"  class="leftdropdown-select">             <option value="default" selected="selected">default             <option value="http://www.1.com">1             <option value="http://www.2.com">2             <option value="http://www.3.com">3             <option value="http://www.4.com">4             <option value="http://www.5.net">5         </select>     </div> <input type="button" name="go" id="go" value="go button"> <button type="reset" class="right">reset</button> 

in fiddle: http://jsfiddle.net/dk01/b3h9s/

the key here make sure remove disabled attribute select elements. not enough set false. according spec, value or no value disable element long attribute present. going want make sure when reset form, remove of disabled attributes select boxes. reset() function of javascript resets values of form defaults, not reset , attributes may have modified, including disabled attribute.

additionally, notice better avoid onclick attribute there may multiple events want happen on click even. instead, use jquery on('click') function.