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!
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
});
});
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With