Pressing Enter should submit the form

5 points by jonascopenhagen 13 years ago | 4 comments

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.

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.

jonascopenhagen 13 years ago |

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

goofygrin 13 years ago |

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