Skip to main content

Bug Tracker

Side navigation

#11043 closed enhancement (plugin)

Opened December 16, 2011 03:27PM UTC

Closed December 16, 2011 04:26PM UTC

Form elements affected by a "reset" do not have their events triggered

Reported by: e.sand@elisand.com 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?

Attachments (0)
Change History (3)

Changed December 16, 2011 03:37PM UTC by e.sand@elisand.com comment:1

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>

Changed December 16, 2011 04:19PM UTC by e.sand@elisand.com comment:2

... 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).

Changed December 16, 2011 04:26PM UTC by dmethvin comment:3

resolution: → plugin
status: newclosed

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.