Prevent Duplicate Form Submission With jQuery

Have you ever created a form in your website with Ajax and seen that sometimes, the same form was being submitted over and over again?

In this article I’m going to show you a really simple jQuery plugin that will prevent duplicate form submissions by disabling the Submit button as it has been clicked.

How to use it:

1. Download the plugin and place the jquery.prevent-duplicate-submit.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.prevent-duplicate-submit.js"></script>

2. Add the CSS class 'prevent' to the submit button.

<form action="/path/to/endpoint/">

  <label for="exampleInputEmail1">Email address</label>
  <input type="email" id="exampleInputEmail1" aria-describedby="emailHelp">
  <div id="emailHelp">We'll never share your email with anyone else.</div>

  <label for="exampleInputPassword1">Password</label>
  <input type="password" id="exampleInputPassword1">

  <input type="checkbox" id="exampleCheck1">
  <label for="exampleCheck1">Check me out</label>

  <button type="submit" class="prevent">Submit</button>

</form>

3. Initialize the plugin on the HTML form and done.

$(function(){
  $('form').disableDuplicateSubmit();
});

4. Customize the submit button when disabled.

.prevent:disabled {
  background: #dddddd;
}

---

This awesome jQuery plugin is developed by shgishzk. For more Advanced Usages, please check the demo page or visit the official website.