Description
The other day I wondered: Why is it that browsers don't prevent double form submissions by default? Some users (mistakingly) double click on submit buttons, or re-click a submit button when a request takes up a long time. This way the backend might process certain transactions twice (or more, if the user submitted multiple times).
To work around this on the client we have to rely on JavaScript (which might not be available):
document.querySelectorAll('form').forEach((form) => {
form.addEventListener('submit', (e) => {
if (form.classList.contains('is-submitting')) {
e.preventDefault();
e.stopPropagation();
return false;
};
form.classList.add('is-submitting');
});
});
An attribute on <form>
to tweak this behavior – instead of having to rely on JavaScript – would come in handy and form a nice addition to the spec.
I see two options to go forward:
- Browsers/the standard keeps the current behavior and allow multiple submits. Developers must opt-in to prevent multiple submissions using a
preventmultiplesubmits
attribute. - Browsers/the standard adjust the current behavior to only submit forms once. Developers must opt-in to allow multiple submissions using a
allowmultiplesubmits
attribute.
My personal preference goes to the second option, as it's a safe default and a courteous thing for browsers to do:
- I can't immediately think of good reasons of why one would allow multiple successive form submits — an area that might require some additional research.
- Operating systems also work that way: for example, pressing a confirmation button twice won't confirm it twice but only once.
If you search for "Double Submit problem" on a search engine you'll find lots of posts regarding this topic — it's an active problem that lives with developers. The post https://ma.ttias.be/double-clicking-on-the-web/ stood out to me, as it also involves user behavior.