Prevent from submitting the ajax form twice

[qzminski]

It may happen that the form processing takes a while, and it may happen that the visitor will not notice that and submit the form again. This could result in a double form submission. This improvement should solve that.

One open question is: should we disable the form fields right after submission, for the better UX?

/cc @Toflar

[fritzmg]

imho this is relevant for forms in general, not just when $this->ajax is enabled.

<form onsubmit="this.inert=true">

[Toflar]

One open question is: should we disable the form fields right after submission, for the better UX?

Imho yes, wdyt @contao/developers? Not even sure if there's a simple variant in 2023 but at least the submit button should probably be disabled.

[fritzmg]

What about adding the aforementioned onsubmit attribute by default? inert seems to be pretty new and I have no real experience with it whatsoever - or whether this is even good practise or not. But I did some quick tests and it works as intended both for regular and AJAX forms.

[aschempp]

I don't think inert is the correct use. It will for example remove the element from the accessibility-tree.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert

Not sure if there's a better standard, but adding any data attribute would allow to apply CSS for styling a disabled submit button as well as disabling mouse events.

[ausi]

We already discussed this in #1933 (comment)

If we want to change course here, I’d use a script similar to the one metioned in whatwg/html#5312