Prevent Double Form Submissions
Disables a form's submit button and shows "Sending…" right after it is clicked, so impatient visitors cannot send comments, enquiries or orders twice.
Opens WPIDE on
Code
document.addEventListener('submit', function (e) {
var form = e.target;
if (!form || form.nodeName !== 'FORM' || form.classList.contains('wpide-allow-resubmit') || e.defaultPrevented) { return; }
if (form.checkValidity && !form.checkValidity()) { return; }
var buttons = form.querySelectorAll('button[type="submit"], input[type="submit"], button:not([type])');
// Wait a tick so the clicked button's name and value are still sent with the form.
setTimeout(function () {
buttons.forEach(function (btn) {
btn.disabled = true;
btn.setAttribute('aria-disabled', 'true');
btn.setAttribute('data-wpide-label', btn.nodeName === 'INPUT' ? btn.value : btn.textContent);
if (btn.nodeName === 'INPUT') { btn.value = 'Sending…'; } else { btn.textContent = 'Sending…'; }
});
}, 0);
setTimeout(function () {
buttons.forEach(function (btn) {
btn.disabled = false;
btn.removeAttribute('aria-disabled');
var label = btn.getAttribute('data-wpide-label');
if (btn.nodeName === 'INPUT') { btn.value = label; } else { btn.textContent = label; }
});
}, 8000);
});Notes
Forms that submit with AJAX re-enable the button after 8 seconds. Add the class wpide-allow-resubmit to a form to skip it.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.