A partial archive of discourse.wicg.io as of Saturday February 24, 2024.

Is there a standard way to check if a form submission is in progress?

simevidas
2021-01-14

Google’s “Payment and address form best practices” article suggests disabling submit buttons once they have been activated by the user. The idea is to prevent repeated form submissions if the user clicks/taps the submit button repeatedly in short succession.

In order to do that, the web page needs to check if the form is currently being submitted:

form.addEventListener('submit', (event) => {
  if (/* form submission in progress */) {
    event.preventDefault();
  }
}); 

Is there a standard way to do the /* form submission in progress */ check? Is this check even needed, or can this pattern be implemented in a different, better way?

Sam_Dutton
2021-01-15

Hi Šime

The sequence I was envisaging in that article is something like this:

  1. User taps/clicks submit button.
  2. Button is disabled (by setting the disabled attribute, say) and UI may be updated in other ways to confirm that action is in progress.
  3. Form submit handler does something (e.g. makes request to server).
  4. Depending on the response from the server (or a timeout or whatever) UI is updated, e.g. the user is taken to an order confirmation page, or shown how to change something problematic in the form (in which case the submit button would be enabled).

In don’t think this approach needs (/* form submission in progress */), but I may be missing something.

Sam

simevidas
2021-01-16

Yup, that approach makes sense.