Form won't submit using Enter key in Chrome or Firefox

Question

I feel dumb about this but isn't it normal web browser behaviour to submit a form when you press the Enter key? What is possibly wrong with this? I have checked that it is not any javascript interfering by testing with js disabled. It DOES work in IE. I would prefer to have the submit button be a <button> rather than an <input>, but I thought input would have a better chance of working.

<form role="search" method="get" class="search-form form-inline" action="http://local.sos/">
   <div class="input-group">
     <span class="input-group-btn">
       <button class="btn" disabled=""><i class="icon-search"></i></button>
     </span>
     <input type="search" value="" name="s" class="search-field form-control" placeholder="Search">
     <span class="input-group-btn">
       <input type="submit" class="search-submit btn"><i class="icon-arrowright"></i>    </input>
     </span>   
   </div>
</form>

Answer 1

You're relying on the non-obvious behavior that pressing 'enter' in a text field on a form will automatically submit the form, but only if there is only one text field in the form. I had a similar problem, only without trying to use the disabled attribute ...

Apparently this is part of the HTML 2.0 specification:

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

An old, but apparently still valid, and interesting, further discussion here.

... evidently meant as a convenient way to submit simple queries, but reducing the risk, on a complex form, of prematurely submitting it while trying to fill it in. Numerous browser implementers (e.g Netscape, Opera, various versions of Lynx,...) followed this advice, though it seems with slightly different interpretations.

If there's more than just a single text field, however, you will probably need a submit button of some sort, even if you don't want to see it on the form and use CSS to hide it -- (display: none, etc) -- it should still work. (Of course this is all up to how browsers decide to implement, but it seems standard from what I can tell.)

I made a JSFiddle to demonstrate. As far as I can tell (lazily just testing with Chrome), the form will submit on "Enter" if there's only one text field, or if there's a submit button, even if it's hidden.

<h2>Form with one text field only</h2>
<p>Seems to submit automatically when pressing 'enter' in the first text field</p>
<form action="" method="post">
  <div>
    <label for="pt-search-input">Search</label>
    <div>
      <input name="term" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a></div>
  </div>
</form>

<h2>Form with two text fields</h2>
<p>Won't submit when pressing 'enter' in the forms ...</p>
<form action="" method="post">
  <div>
    <label for="pt-search-input">Search</label>
    <div>
      <input name="term" type="text" placeholder="Example: budapest amsterdam" />
      <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a></div>
  </div>
</form>

<h2>Form with two text fields and a submit button ...</h2>
<p>Now it submits with 'enter' key</p>
<form action="" method="post">
  <div>
    <label for="pt-search-input">Search</label>
    <div>
      <input name="term" type="text" placeholder="Example: budapest amsterdam" />
      <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a>
      <input type="submit" />
    </div>
  </div>
</form>

<h2>Form with two text fields and a HIDDEN submit button ...</h2>
<p>Seems to work, even with submit hidden ...</p>
<form action="" method="post">
  <div>
    <label for="pt-search-input">Search</label>
    <div>
      <input name="term" type="text" placeholder="Example: budapest amsterdam" />
      <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a>
      <input type="submit" />
    </div>
  </div>
</form>


<h2>Form with no action or method attribute, HIDDEN submit button ...</h2>
<p>Even this seems to work.</p>
<form>
  <div>
    <label for="pt-search-input">Search</label>
    <div>
      <input name="term" type="text" placeholder="Example: budapest amsterdam" />
      <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a>
      <input type="submit" />
    </div>
  </div>
</form>

See also Form not submitting when pressing enter