How to stop Enter Key presses triggering the Submit button on my HTML form

Question

I have a form with some text input fields (let's say FirstName and LastName to keep it simple) and then a submit input field at the bottom of the form (with a value of Sign In)

When I type something in one of the text fields (such as typing John for the FirstName) and then press Enter on the keyboard, it automatically triggers the submit input field, as if I have actually clicked the Sign In button.

I understand the reason why it is doing this, however I need to find a work around so that if Enter is pressed, I can carry on typing in the rest of my form. I don't want the form to actually be submitted until someone clicks Sign In.

I have read a suggestion such as changing <input type="submit" value="Sign In">to <input type="button" value="Sign In"> instead, however if I do this it then makes the button un-clickable, and doesn't actually 'submit' the form.

Any suggestions?

I haven't included my code because I didn't feel it was necessary, as I'm sure there's a really simple solution I'm completely missing.. but if I really need to paste my code I can.. thanks.

Possible duplicate of [Prevent users from submitting a form by hitting Enter](https://stackoverflow.com/questions/895171/prevent-users-from-submitting-a-form-by-hitting-enter) — Luke Ramsden, Sep 19 '18 at 13:40
@LukeRamsden I should have mentioned that ideally I would like a way to do this in just HTML if possible. I know some PHP but my knowledge of JavaScript isn't great — ginomay89, Sep 19 '18 at 13:46
It's not possible without JavaScript but you can do it inline in the HTML (take a look at my answer) — Luke Ramsden, Sep 19 '18 at 13:54

score 1 · Accepted Answer · answered Sep 19 '18 at 13:53

1

Inline HTML:

<form onkeypress="return event.keyCode != 13;" ...>
...
</form>

That works by disabling the enter key for the entire form. (take note that this will stop you from making newlines in textareas)

Source

answered Sep 19 '18 at 13:53

Luke Ramsden

704
4
15

score -1 · Answer 2 · edited Sep 19 '18 at 14:26

-1

You can not for the input "text" but you can for input "area" because area input is not fixed.

edited Sep 19 '18 at 14:26

Lauren Rutledge

1,195
5
18
27

answered Sep 19 '18 at 13:47

Antonin Touron

1
3

While this is technically true, it doens't really answer the question because the enter makes a new line instead of submitting, which doesn't solve the issue. – Luke Ramsden Sep 19 '18 at 13:47

How to stop Enter Key presses triggering the Submit button on my HTML form

2 Answers2