Форма не отправляется при нажатии enter

Я боролся с этой же проблемой; одна из моих форм отправлялась при нажатии "enter" в текстовых полях без проблем; другая, аналогичная, форма на той же странице вообще не отправлялась, для жизни меня.

ни в одном поле не было кнопки отправки, и ни один из них не использовал javascript для отправки.

Я обнаружил, что когда в форме есть только одно текстовое поле, нажатие "enter" в текстовом поле автоматически отправит; но если есть более одного (обычного (т. е. однострочного) ввода текста) поля, он ничего не делает, если нет также какой-то кнопки "Отправить".

по-видимому, это часть в HTML 2.0 спецификация:

если в форме есть только одно однострочное поле ввода текста, агент пользователя должен принять Enter В этом поле в качестве запроса на отправку формы.

старая, но, по-видимому, все еще действительная и интересная дальнейшая дискуссия вот!--9-->.

... очевидно, подразумевается удобный способ подачи простых запросов, но снижающий риск преждевременного представления их в сложной форме при попытке заполнения. Многочисленные разработчики браузеров (e.g Netscape, Opera, различные версии Lynx,...) последовал этому совету, хотя, кажется, с несколько разными интерпретациями.

Я JSFiddle для демонстрации. Насколько я могу судить (лениво просто тестирование с Chrome), форма будет отправлена на "Enter", если есть только одно текстовое поле или если есть кнопка отправки, даже если она скрыта.

(EDIT: позже я обнаружил, что он также работает, если есть другие поля ввода, которые не являются регулярным однострочным вводом текста ... например, textareas, selects и т. д. -- спасибо @user3292788 за эту информацию. Обновил JSFiddle, чтобы отразить это).

<h2>Form with one text field only, no submit button</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, no submit button</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="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 multiple fields, but only one text input, no submit button.</h2>
<p>This seems to work as well.</p>
<form action="" method="post">

  <p><input type="text" ></p>

  <textarea name="" id="" cols="30" rows="10"></textarea>

  <p>
    <select name="" id="">
      <option value="">Value</option>
    </select>
   </p>
</form>

он также может исходить из привязки javascript к <button> в вашей форме. Например, если у вас есть

<button id='button'>Reset</button>
<span id="textToReset">some info</span>

<script type="text/javascript">
$('#button').bind('click', function(){  
    $('#textToReset').text('');     
    return false;
})
</script>

ваша кнопка ввода будет поймана где-то return falseи ваша форма не будет отправляться под клавишей Enter. Правильный способ-указать, что <button> действуйте как кнопка. Таким образом :

<button id='button' type="button">Reset</button>

и падение return false вы положили туда, чтобы предотвратить эту кнопку от отправки формы. ;-)

ради обучения, <button> тип по отправить по умолчанию. Если вы хотите, чтобы они действовали как элемент управления для вашей формы, необходимо указать type="button" или type="reset" см w3.org об этом