Ticket #11043 (closed enhancement: plugin)
Form elements affected by a "reset" do not have their events triggered
| Reported by: | e.sand@… | Owned by: | |
|---|---|---|---|
| Priority: | undecided | Milestone: | None |
| Component: | unfiled | Version: | 1.7.1 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
When a form has the "reset" event fired, the browser resets all input (and textboxes) to their default (attr()) values. However, none of the click/change events that may be bound to those elements are triggered.
When a form reset event is fired, a "bubble down" should happen to trigger any events bound to input and textbox elements so that the form is truly reset.
... or is there reason to specifically not have this functionality built in to jQuery?
Change History
comment:2 Changed 18 months ago by e.sand@…
... and here is a relatively simple jQuery code fix (written for 1.4.x, hence the lack of .attr() and .prop() and the use of .live()):
$('form').live('reset', function() {
$(this).find('input, select, textarea').each(function() {
if ($(this).is('input[type="radio"], input[type="checkbox"]')) {
if ($(this).is(':checked') !== $(this)[0].defaultChecked) {
$(this).triggerHandler('change');
}
}
else {
if ($(this).val() !== $(this)[0].defaultValue) {
$(this).triggerHandler('change');
}
}
});
});
Please note though that I'm only triggering the change event, not the click event. I would suppose that both events should trigger...
Also, I'm sure there can be clean-ups done in that code (e.g., my use of "$(this)" when "this" is already a jQuery object).
comment:3 Changed 18 months ago by dmethvin
- Status changed from new to closed
- Resolution set to plugin
When a native "reset" event fires, the native "change" events do not fire so I think we are doing right default thing. You could certainly create a plugin with that code for people who wanted to do it. Be aware that the "reset" event does not bubble in all browsers, however, so you'll need to bind it directly to the form.
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
Simple test case:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta charset="UTF-8"/> <title>Test Page</title> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> //<![CDATA[ jQuery(function($) { $('#x').bind('change', function() { $('#y').toggle(); }); }); //]]> </script> </head> <body> <form> <input type="checkbox" id="x" value="1"/> <p id="y" style="display: none;">some text</p> <input type="reset" value="reset"/> </form> </body> </html>