The main purpose of this plugin is to prevent a user from submitted a form multiple times if they double click the submit button.

When a form is submitted that has been initalized with this plugin, all buttons and inputs with type submit will be disabled. Other ways of submitting the form such as hitting enter in a text field are also blocked. After the duration, default is 4000 milliseconds, the form is reactivated.

The following demo forms are set to preventDefault for the purposes of this demo.

Default Options

document.querySelectorAll('.default-options-form').forEach(function (element) {
    new disableFormOnSubmit(element);
});
                

Changing Duration

document.querySelectorAll('#demo-form-duration').forEach(function (element) {
    new disableFormOnSubmit(element, {
        duration: 1000
    });
});
                

Changing button template

document.querySelectorAll('#demo-form-templates').forEach(function (element) {
    new disableFormOnSubmit(element, {
        buttonTemplate: '<span class="mdi mdi-loading mdi-spin"><\span>',
        submitInputText: 'Please wait to submit again.'
    });
});

Disable Replacing Text

document.querySelectorAll('#demo-form-disable-templates').forEach(function (element) {
    new disableFormOnSubmit(element, {
        buttonTemplate: false,
        submitInputText: false
    });
});

Override Duration with data- Attribute

<form class="row mb-4" data-disable-duration="1000">
    ...
</form>
                

Turn Off Disable with data- Attribute

<form class="row mb-4" data-disable-duration="false">
    ...
</form>