Prevent Duplicate Form Submission With jQuery
File Size: | 4.22 KB |
---|---|
Views Total: | 1023 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.