11

Can anyone explain this behavior? Pressing the Enter key in an HTML form's text box submits the form when the form contains a single text box, but not when the form contains two or more text boxes.

jsFiddle (one input): http://jsfiddle.net/gpPTa/
jsFiddle (two inputs): http://jsfiddle.net/fDbJt/

thinkterry
  • 690
  • 1
  • 9
  • 12
  • Possible duplicate of [Why does a FORM with one text INPUT submit on enter while one with two text INPUTs does not?](http://stackoverflow.com/questions/17797025/why-does-a-form-with-one-text-input-submit-on-enter-while-one-with-two-text-inpu) – Pang Jul 04 '16 at 07:26

2 Answers2

3

Unfortunately it's a default for the form to submit on enter with only one input.

You can either give each of them an javascript command that submits the form, or place a submit button with width: 0 and/or visibility: none. For example:

<form>
    <input style='width:0; visibility:hidden' type='submit'>
    <input>
    <input>
</form>
Jeffrom
  • 61
  • 5
0

It seems that the browser assumes that since there is only one input, it is also the submit control. Focusing on it and pressing enter will submit the form, the same way as focusing on a submit button will behave.

When you add type="submit" to one of the <inputs>, you can use as many others as you like and the form will be submitted by pressing enter.

I don't have any references to back this up, but it seems logical to me.

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
  • This behavior seems too inconsistent to me. I can see why pressing enter on the sole `` submits the form, because it's the only form element to interact with. But I don't see why pressing enter on one `` submits the form if a different `` contains `type="submit"`. I wonder if there's specification that provides the rationale behind this behavior. – thinkterry Jun 16 '11 at 03:04