How to Prevent Double Form Submissions in jQuery Without Disabling Form Elements?

Prevent Double Submissions in Forms Using jQuery

Users often resubmit forms accidentally, especially when they take a long time to process. To prevent this, jQuery can be used to disable form submissions after the initial attempt. However, in some cases, disabling all form elements, including inputs, may unintentionally prevent the submission itself.

Improved Solution using jQuery Plugin

An alternative approach is to use a jQuery plugin to handle the double submission prevention. This plugin leverages jQuery's data() method to mark forms as submitted or not.

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

Usage

To use this plugin, simply include it with $('form').preventDoubleSubmission();.

Exclude Allowed AJAX Forms

If certain forms (e.g., AJAX forms) should be allowed to submit multiple times, they can be excluded using CSS classes, as seen in the following example:

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

With this method, forms can be submitted without any issues, while accidental resubmissions are effectively prevented, enhancing the user experience and preventing potential data loss.

The above is the detailed content of How to Prevent Double Form Submissions in jQuery Without Disabling Form Elements?. For more information, please follow other related articles on the PHP Chinese website!