jQuery: modifying the submit button when a form is submitted

I’ve found it useful on certain apps to disabled the submit button once the form has been submitted to prevent the user from accidentally/deliberately clicking on it twice. There are two ways to accomplish this, and only one will work in IE. Can you guess which one?[ad code=1]

$("form :submit").click(function(){
	$(this).attr("disabled", "disabled").val("Please wait...");
});
$("form").submit(function(){
	$(":submit", this).attr("disabled","disabled").val("Please wait....");
});

See this example in action

In the first example, the submit button will be disabled, its value will be changed, but the form will not submit. Adding a return true; statement will not fix the issue. In the second example, all the behaviors you would expect work in Firefox and IE.

I did some investigating and could not come up with an answer. With the first example you could call a .submit() directly on the form, but this should not be necessary. So, if you want to manipulate the submit button once the form has been submitted, intercept the submit event on the form instead of intercepting the click on the button itself.

Leave a comment