Prevent Multiple Form Submissions With JQuery or Vanilla JavaScript

Use JQuery to Prevent Multiple Form Submissions

To prevent the user from submitting a form multiple times, we’ll use JQuery to listen for the submission event. Once the form is submitted, we’ll add a disabled attribute to the button to prevent multiple form submissions. Now the user can’t click it again. Changing the “Submit” text is optional, but it’s a great way to give your user feedback so they know that something is happening while they wait. As an example, a WooCommerce order created programmatically may take a few seconds to run so you wouldn’t want your customer to create duplicate orders. It would be an administrative nightmare.

$('#formID').submit(function(){

  // Disable the submit button      
  $('#submitID').attr('disabled', true);

  // Change the "Submit" text
  $('#submitID').prop('value', 'Please wait...');
  
  return true;
       
});

Prevent Multiple Form Submissions with Vanilla JavaScript

This short JavaScript snippet does exactly the same thing as the JQuery above with some changes in the syntax.

var form = document.getElementById('formID');
var submitButton = document.getElementById('submitID');

form.addEventListener('submit', function() {

   // Disable the submit button
   submitButton.setAttribute('disabled', 'disabled');

   // Change the "Submit" text
   submitButton.value = 'Please wait...';
			
}, false);

Which Method To Use

If your website or app is already using JQuery, then you can simply copy the code into your file that handles your JQuery scripts.

If you don’t use JQuery on your site, it would be unwise to install JQuery to handle just one script, so the pure JavaScript method would be your best option.