Prevent Double Submit

[robodna]

What is the 'ModularForms' way of preventing double-form submits?

Thank you,

[fabian-hiller]

Can you describe in more detail what you mean by "double-form submits"?

[robodna]

The user double-clicks the 'submit' button. The second click should be ignored while the first submit is being processed, until the submit either returns an error or success.

Best,

[fabian-hiller]

You can disable the submit button while formState.submitting is true: https://modularforms.dev/qwik/api/FormStore

You can "watch" the form state in our playground: https://modularforms.dev/qwik/playground/login

[robodna]

I did think of that but it does not prevent from the form being submitted multiple times by pressing 'enter'. It would be good to have a 'pending' form signal, or maybe adding a 'pending' property to form.response.status

[fabian-hiller]

I did think of that but it does not prevent from the form being submitted multiple times by pressing 'enter'.

Are you sure about that?

[robodna]

Yes, if you have the focus on an input and press enter, it will submit the form. I've added an external signal to solve the issue.

UPDATE: As you hinted, pressing enter twice in the input field does not submit the form twice and treats the action the same as a 'double click' on an <input tag set to 'submit' instead of 'button'. In my case, I had an 'onkeypress' event detecting 'enter' on a textarea to submit the form which could potentially cause a double-submit but is a unique issue to how I implemented the form. I fixed it and modular forms works as expected.

[fabian-hiller]

I would expect that adding disabled={formState.submitting} to the button would disable any submission while there form is submitting. But maybe I'm wrong.

[robodna]

I think disabling the <button type="submit" prevents double-submits for double-clicks on the button and double-enter in an input field. I suspect adding an onKeypress handler detecting the 'enter' keypress on a textarea input and having that handler call 'myform.submit' in JS would still cause a double-submit. As you suggest, adding if (!formState.submitting) myForm.submit in the onKeypress event is the right solution in that case. All good now, thanks.