Opened 11 years ago
Closed 11 years ago
#11043 closed enhancement (plugin)
Form elements affected by a "reset" do not have their events triggered
| Reported by: | Owned by: | ||
|---|---|---|---|
| Priority: | undecided | Milestone: | None |
| Component: | unfiled | Version: | 1.7.1 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
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 (3)
comment:1 Changed 11 years ago by
comment:2 Changed 11 years ago by
... 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 11 years ago by
| Resolution: | → plugin |
|---|---|
| Status: | new → closed |
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.
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>