Settings

Theme

Pressing Enter should submit the form

5 points by jonascopenhagen 13 years ago · 4 comments · 1 min read


There are too many forms out there where pressing Enter (when an input field is focused) does nothing. Pressing Enter should submit the form.

Normal HTML(5) forms work this way, but if your form is mostly managed through JS you don't necessarily get this default functionality.

If you don't actually use the <form> tag but instead just have an input field and a submit button, pressing Enter will do nothing. In that case there are two solutions:

1) Put the input fields inside a <form>. (If you need JS to control form submission, you can always include an onsubmit event handler that returns true or false depending on whether the user filled in the form correctly). Example: http://jsfiddle.net/LFkGZ/

2) Attach a keydown event to <body> so that when the user presses Enter you can submit the form. Example: http://jsfiddle.net/6r7gh/

ScottWhigham 13 years ago

Except when it shouldn't: multi-line textboxes (such as those on a "Contact Us" or "Description" box) need the ability to let the user hit Enter without the form being submitted.

  • jonascopenhagenOP 13 years ago

    Sure, and that's the way it works by default: In a <textarea> Enter adds a new line - in a single-line <input> Enter submits the form.

    What I'm saying is that if you have a single-line <input> field and pressing Enter doesn't submit the form, you should add some HTML/JS to ensure that Enter submits the form.

jonascopenhagenOP 13 years ago

Clickable: http://jsfiddle.net/LFkGZ/ http://jsfiddle.net/6r7gh/

goofygrin 13 years ago

Small forms... Sure. Long forms... Not so much.

Keyboard Shortcuts

j
Next item
k
Previous item
o / Enter
Open selected item
?
Show this help
Esc
Close modal / clear selection