WingNews logo WingNews
top | item 5454276

Pressing Enter should submit the form

5 points| jonascopenhagen | 13 years ago

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/

4 comments

order

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.

jonascopenhagen|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.

goofygrin|13 years ago

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