Coming from this post, the solution is very simple and doesn't need jQuery.
This is the function that will disable multiple submits to any form that has such attribute
function disableMultipleSubmits() { // by Andrea Giammarchi - WTFPL
Array.prototype.forEach.call(
document.querySelectorAll('form[disablemultiplesubmits]'),
function (form) {
form.addEventListener('submit', this, true);
},
{
// button to disable
query: 'input[type=submit],button[type=submit]',
// delay before re-enabling
delay: 500,
// handler
handleEvent: function (e) {
var button = e.currentTarget.querySelector(this.query);
button.disabled = true;
setTimeout(function () {
button.disabled = false;
}, this.delay);
}
}
);
}As example, this form will be affected
<!DOCTYPE html>
<form method="post" action="?" disablemultiplesubmits>
<button type="submit">click me</button>
</form>We can use that function as DOMContentLoaded listener in a script that is not async (deferred or just regular script on heead tag) or simply at the end of the body.
// at the end of the page
disableMultipleSubmits();
// or within a defer or a non async script
document.addEventListener('DOMContentLoaded', disableMultipleSubmits, false);The function logic does not affect regular behavior, so we can easily add other listeners.
document.querySelector('form').addEventListener('submit', function (e) {
e.preventDefault();
// rest of the Ajax checks and stuff ...
});
This would leave out dynamically created elements and would not allow for inheritance of behaviours, like what we can do with css.
I'm not saying this is bad per se, just saying it should be done natively by the browsers.