Is there a way to stop a form submitting when 'enter' is pressed?

Hey all,

Currently if a user hits enter/return on a form input - the form will submit. I think we can improve the UX of our specific scenario by disallowing this and instead triggering form submit on the array change.

Wondering if this is possible somehow?

Ok, solved this if anyone might find this useful, you can add the following to your form:

onkeydown="return event.key != 'Enter';"

If there is another way to do this, native to wappler UI - please let me know!

If there is a submit button in your form, try changing its type to a regular button. And on click of that, set dynamic action of form.submit().

Good idea! Thank you @sid

Yes, good question and answer from @sid. I’d been thinking the same the other day. I have ctrl+enter mapped to submit forms but was wondering why some of them submitted with just enter… now I know

hi guys
any news about this ?

Is there a Wappler way to do this?

I have a multi-step form that works great. The submit button is only displayed on the final step. But even if you are on the first step it wants to submit the form if you press Enter Key. How can I prevent the Enter key from submitting the form?

Any help would be appreciated. :beers:

As there is no native method you can implement a little script to your layout page will disable enter for all forms using that layout. Or just add it to the page itself.

<script>
  document.getElementById('FORM_NAME').addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
      event.preventDefault();
    }
  });
</script>

Or you can change the button type from submit to button and then use a Dynamic Event to submit the form on click...

I though of that, but how do I set up my update form in Server Connect if it isn't a Serverconnect form? Can you set a form as a serverconnect form but not have an action?

I think @Cheese was suggesting keeping the form as it is, but just changing the button type from ’submit’ to ‘button’. This prevents the enter action and you just add a dynamic action to the button to submit the form.

@brad Apologies, I am entirely consumed by a major Project at the moment and forgot to respond to your question, but @bpj explained it above perfectly.

:smiling_face_with_three_hearts:

All good, buddy! I am all good and have gone live just a few minutes ago. :beers:

What I ended up doing was simply disabling the submit button until all questions have been answered. Works as a sort of faux validation.

Nice one Brad congratulations! Hope everything goes well for you.

:hugs: