input type Reset Button Not clearing form perfectly

Question

Here is my 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 you can see, I had to use two buttons and one reset button.

I need a correct code that I just use one button that it will work for both and reset button will clear both of them.

Here is 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 you select Google item from first list, then try to use reset button, however both of drop downs menus will set to default, but still one of them is disabled.

I need a code to reset both of items perfectly, and one button that it will work for both of them cause I had to use two buttons for both of items.

I really appropriate for your help on this issue.

Regards

Answer 1

Give this a 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 to select at least one 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 the disabled attribute on reset
    $('#select1,#select2').removeAttr('disabled');

    // Fire off the native reset function
    $(this).closest('form').get(0).reset();
});

and some 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 a fiddle: http://jsfiddle.net/dk01/B3h9s/

The key here is to make sure that you actually remove the disabled attribute from the select elements. It is not enough to just set it to false. According to the spec, any value or no value will disable the element as long as the attribute is present. You also are going to want to make sure that when you reset the form, you remove all of the disabled attributes from the select boxes. The reset() function of javascript only resets the values of the form to their defaults, it does not reset and attributes that you may have modified, including the disabled attribute.

Additionally, notice that it is generally better to avoid the onclick attribute as there may be multiple events that you want to happen on a click even. Instead, use the jquery on('click') function.