jQuery Plugin To Disable Form On Submit

jQuery Plugin To Disable Form On Submit
File Size: 7.5 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A simple yet useful jQuery plugin that disables form and submit buttons (submit inputs) on submit to prevent multiple clicks on your submit button. When submitting your form, the submit button will be disabled for a specific amount of time, with custom alert messages and/or 'busy' indicators.

How to use it:

1. Load the Font Awesome for the loading spinners (OPTIONAL).

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

2. Load jQuery JavaScript library and the disable-form-on-submit.js script at the end of the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="disable-form-on-submit.js"></script>

3. Just call the function disableOnSubmit() on your html form and done.

<form class="disable-on-submit">

  ... Form fields here ...

  <button type="submit">Submit Button</button>
  <input type="submit" value="Submit Input Is Supported As Well">

</form>
$('form.disable-on-submit').disableOnSubmit();

4. Customize the submit button (submit input) after submitting.

$('form.disable-on-submit').disableOnSubmit({
  duration: 4000,
  buttonTemplate: '<span class="fa fa-fw fa-spinner fa-spin"></span>',
  submitInputText: 'Please Wait...'
});

Changelog:

2019-01-22

  • Removed font-awesome as default button message

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