Skip to content

Form Submission: Fix the "Double Submit problem" at the spec level #5312

Open
@bramus

Description

@bramus

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:

  1. Browsers/the standard keeps the current behavior and allow multiple submits. Developers must opt-in to prevent multiple submissions using a preventmultiplesubmits attribute.
  2. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions