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

Ответ 1

У вас есть два варианта:

• Создайте обработчик событий для кнопки ввода и добавьте его в свои привязки.
• Используйте <input type=submit> в форме где-нибудь, а это то, что получает автоматическое поведение Enter Key, которое вы после.

Ответ 2

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

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

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

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

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

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

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

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

(EDIT: позже я обнаружил, что он также работает, если есть другие поля ввода, которые не являются регулярным однострочным текстовым вводом... например, текстовыми полями, выбирает и т.д. - благодаря @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>

Ответ 3

Он также может быть связан с привязкой 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>

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

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

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

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

Ответ 4

Если у вас есть правильная кнопка input-submit-button, но вы используете событие (click) для этой кнопки, оно не сработает при вводе. Очевидно, он отправит форму, но не вызовет событие нажатия кнопки. Использование функциональности для формирования самого себя и отправки события заставит его работать.

Ответ 5

На всякий случай, если кто-то совершит ту же ошибку, что и я, и придет сюда в поисках ответа:

Если у вас есть две (или более) кнопки отправки ¹ в форме, нажатие клавиши ввода вызовет только первую отправку, а не вторую.

¹ как указано @paul-daoust в его комментарии к ответу @g-d-d-c: и <input type=submit>, и <button type=submit> будут работать как кнопка отправки