Using jQuery to prevent multiple form submissions
Posted on September 5th, 2008 at 11:35
Some users confuse the concept of clicking and double clicking. This can have nasty consequences when they submit a form and fire off an expensive server job twice because they double clicked on the submit button of a web form.
Fortunately jQuery can help you.
The following jQuery code (based on this example) disables the submit button as soon as the form is submitted:
$("form").submit(
function() {
$("input.submit").attr("disabled","true");
}
);
It works really great as long as the form contains only one submit button. If the form contains multiple submit buttons all buttons will trigger the same action. Why?
The HTML spec clearly states:
Disabled controls cannot be successful
This is W3C-speak for "The browser does not send the value of the button to the server so the server doesn't know which button was clicked".
I was unable to find a workaround for this behavior so I ended up using the jQuery BlockUI plugin.
Update: I managed to create a fully working version.
When you do the POST on behalf of submit() you can have a bit more control over how it works.
var counter = 0; $("form").submit(function() { if(counter > 1) return false; $.ajax({async: false, type: "POST", data: { times: counter, ... } success: function() { ... }); counter++; return false; });We actually use this code on our Car Transport site and it works perfectly. We had a lot of trouble with people double submitting the forms until I stumbled on this site through google, so just wanted to say thanks and keep up the good work.
Post new comment