Using jQuery to prevent multiple form submissions

Submitted by litrik on

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.

Topic: 

2 Comments

When you do the POST on

Submitted by Tim Esselens on

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;
});