Search code examples
htmlformssubmitform-submitsubmit-button

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


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.


Solution

  • 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