Prevent double submission of forms in jQuery

by

Update in 2018: I just got some points for this old answer, and just wanted to add that the best solution would be to make the operation idempotent so that duplicate submissions are harmless.

Eg, if the form creates an order, put a unique ID in the form. The first time the server sees an order creation request with that id, it should create it and respond “success”. Subsequent submissions should also respond “success” (in case the client didn’t get the first response) but shouldn’t change anything.

Duplicates should be detected via a uniqueness check in the database to prevent race conditions.

I think that your problem is this line:

$('input').attr('disabled','disabled');

You’re disabling ALL the inputs, including, I’d guess, the ones whose data the form is supposed to submit.

To disable just the submit button(s), you could do this:

$('button[type=submit], input[type=submit]').prop('disabled',true);

However, I don’t think IE will submit the form if even those buttons are disabled. I’d suggest a different approach.

A jQuery plugin to solve it

We just solved this problem with the following code. The trick here is using jQuery’s data() to mark the form as already submitted or not. That way, we don’t have to mess with the submit buttons, which freaks IE out.

// jQuery plugin to prevent double submission of forms
jQuery.fn.preventDoubleSubmission = function() {
  $(this).on('submit',function(e){
    var $form = $(this);

    if ($form.data('submitted') === true) {
      // Previously submitted - don't submit again
      e.preventDefault();
    } else {
      // Mark it so that the next submit can be ignored
      $form.data('submitted', true);
    }
  });

  // Keep chainability
  return this;
};

Use it like this:

$('form').preventDoubleSubmission();

If there are AJAX forms that should be allowed to submit multiple times per page load, you can give them a class indicating that, then exclude them from your selector like this:

$('form:not(.js-allow-double-submission)').preventDoubleSubmission();

More Related Contents:

  1. jQuery AJAX submit form
  2. Uploading both data and files in one form using Ajax?
  3. Stop form refreshing page on submit
  4. Clearing using jQuery
  5. How to set file input value when dropping file on page? [duplicate]
  6. Submitting a form on ‘Enter’ with jQuery?
  7. How to reset a form using jQuery with .reset() method
  8. How to send a JSON object using html form data
  9. Prevent form redirect OR refresh on submit?
  10. Check if option is selected with jQuery, if not select a default
  11. How to get the containing form of an input?
  12. Drop-down box dependent on the option selected in another drop-down box
  13. Adding POST parameters before submit
  14. How do I use jQuery’s form.serialize but exclude empty fields
  15. Dynamically create and submit form
  16. How to hide form code from view code/inspect element browser?
  17. jQuery – select all text from a textarea
  18. Change the content of a div based on selection from dropdown menu
  19. How can I get jQuery .val() AFTER keypress event?
  20. Submit form after calling e.preventDefault()
  21. How to prevent form element from sending some fields we don’t want?
  22. Javascript – Stop form submit depending on ajax response [duplicate]
  23. How do you limit options selected in a html select box?
  24. submit event does not fire if submit initiated programmatically
  25. Dynamically expand height of input type “text” based on number of characters typed into field
  26. jQuery asynchronous function call, no AJAX request
  27. copying the value of a form’s file input field to another form’s input field
  28. .js.erb VS .js
  29. Clear form after submission with jQuery
  30. jquery serialize and multi select dropdown

Leave a Comment