Does a form reset button fire a select elements onChange event?

Question

I have a form with some select elements that have onChange events attached to them. I would like the event to fire even when someone clicks the form reset button.

My question is: does resetting a form fire a select elements onChange event?

Here is a simple example in jQuery

<script type="text/javascript">
    $('.myselect').change(function() {
        // do something on change
    });
</script>

<form action="/" method="post">
    <select class="myselect" name="select1">
        <option value="1">First</option>
        <option value="2">Second</option>
    </select>
    <select class="myselect" name="select2">
        <option value="1">First</option>
        <option value="2">Second</option>
    </select>
    <!-- When this is clicked I would like it fire the change event -->
    <input type="reset" value="Reset" /> 
    <input type="submit" value="Save" />
</form>

Thanks!

I tested it and it doesn't work. I'm not even sure if it is possible so that is why I asked. Narrowing it down to my error, or the fact that you just cant do it. — user22730, Feb 13 '09 at 18:05
@Powerlord I have to say, I always think "just test it" is a terrible suggestion. The OP will only discover whether something works in his/her browser/version. A much better solution is to follow official standards/API documentation. — osullic, Jan 13 '17 at 10:16

score 4 · Answer 1 · answered Aug 29 '12 at 13:07

Jack M.'s answer is working good. Here is another approach for doing the same. Hope it will help somebody.

Write code/events which you wanted to call in middle of this function. I have tested this. Working good.

$(document).ready(function() {
    $("input:reset").click(function() {       // apply to reset button's click event
        this.form.reset();                    // reset the form

        // call your functions to be executed after the reset      

         return false;                         // prevent reset button from resetting again
    });
});

score 3 · Answer 2 · answered Feb 26 '09 at 20:35

There is an onReset tag for forms, so you could do something like:

<script type="text/javascript">
    var changeFunc = function() {
        // do something on change.
    };
    $('.myselect').change(changeFunc);
</script>

<form onReset="changeFunc()" action="/" method="post">
    <select class="myselect" name="select1">
        <option value="1">First</option>
        <option value="2">Second</option>
    </select>
    <select class="myselect" name="select2">
        <option value="1">First</option>
        <option value="2">Second</option>
    </select>
    <!-- When this is clicked I would like it fire the change event -->
    <input type="reset" value="Reset" /> 
    <input type="submit" value="Save" />
</form>

This method is called before the reset happens, though so it can be tricky. I guess so you can do an "Are you sure?" box. Tossing a setTimeout in the reset function seems to do the trick.

Does a form reset button fire a select elements onChange event?

2 Answers2

Linked