How to prevent form submission on enter key

[greg]

Hey,

I have a form element that has a submit workflow linked to the form element. Right now, when my users click enter the form submits as the enter key triggers the submit workflow. This is not the behaviour that I want. I only want the form to submit when the user clicks the submit button contained within the form.

Is there a WeWebby way to achieve this? I’ve tried accessing the ‘event’ but this is null when using a submit workflow. I don’t want to convert the workflow to an on click event as I want to keep the form validations.

What else could I try?

[joseph]

Probably create a variable buttonWasClicked that is boolean defaulting to false.

• Set to true when clicking the button
• Add conditional on your submit workflow if buttonWasClicked = true then perform your actions else do nothing
• Reset buttonWasClicked

[Batik_Okazov]

Hey,

want to raise this topic again.

Here’s what I’ve already tried:

• Set workflow in “Submit button” that changes additional variable “buttonClicked” == true. And on form submit add verification of buttonClicked variable state (true/false). Unfortunately that doesn’t work, cause the browser automatically “clicks” on the submit button on Enter key press.

• Change the submit button type from “Submit button” to just “Button”. And in this button workflow add the “execute component action” >> “Submit form”. And keep in the submit form workflow the same check if the button was clicked. I expected this would solve the problem, but it wouldn’t. I get “null” in the result of “execute component action” >> “Submit form”.

• Set a page workflow “on page load” with different custom JS. None of the following works.

Code option 1

if (event.key === 'Enter') {
    event.preventDefault(); 
};

Code option 2

const form = document.querySelector(‘form’);
if (!form) return;

form.addEventListener(‘keydown’, e => {
if (e.key === ‘Enter’ && e.target.tagName !== ‘TEXTAREA’) {
e.preventDefault();
}
});

Does anyone have thoughts on this?

[Batik_Okazov]

Solved the problem with this script:

JS

document.addEventListener(‘keydown’, function(event) {
if (event.key === ‘Enter’) {
event.preventDefault();
}
});

The reason was that I put scripts inside page load workflows so they were initiated earlier than form was created. So I put the script inside “form” >> “on create” workflow.

[Batik_Okazov]

Little update for this:

My attempt to submit a form with “submit form” action was returning “null”, because there was no “submit button” inside the form. Therefore, an ordinary button with “type”=“button” couldn’t trigger “on submit”.

The only problem here is that I could see this warning only when I created a new form while debugging. So, if my conclusion is correct, maybe it’d be reasonable to display this warning message permanently?

Right now, it’s only visible when the button inside the form has “type”=“button” (and not “submit button”). But if there are no buttons inside the form at all, no warning message is shown.

@DanielL