A JavaScript Plugin To Disable Form On Submit

A simple yet useful JavaScript 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. Download and load the main script disable-form-on-submit.js script at the end of the document.

<script src="/path/to/disable-form-on-submit.js"></script>

2. Simple all the function disableOnSubmit() on your html form and the plugin will do the rest.

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

const element = document.querySelector(".disable-on-submit");
new disableFormOnSubmit(element);

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

new disableFormOnSubmit(element, {

    // disable the form submit for 4 seconds
    duration: 4000,

    // customize your submit button here
    // you can add loading icon/text here
    buttonTemplate: 'Please Wait...',

    // customize your submit input here
    // you can add loading icon/text here
    submitInputText: 'Please Wait...'
    
});

4. You can also override the default duration via HTML data attribute:

<form class="disable-on-submit" data-disable-duration="5000">
</form>

<form class="disable-on-submit" data-disable-duration="false">
</form>

Changelog:

2023-11-17

• Rewrite in vanilla JavaScript
• Update Doc

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.