Форма с двумя входами, не отправляющими?

Question

Может кто-то пожалуйста, объясните, почему этот код не работает:

$('form').on('submit', function (e) { 
    e.preventDefault(); 

    var first = $('.first').val(); 
    var next = $(".next").val(); 
    alert(first + " " + next); 
}); 

http://jsfiddle.net/cj1hysf3/

Это, кажется, работает хорошо, когда я удалить один из двух входов, но иметь их и там портит его.

Answer 1

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

$('form').on('submit', function (e) { 
 
    e.preventDefault(); 
 

 
    var first = $('.first').val(); 
 
    var next = $(".next").val(); 
 
    alert(first + " " + next); 
 
});

input[type="submit"] { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" name="a" class="first" placeholder="Enter First" /> 
 
    <input type="text" name="s" class="next" placeholder="Enter Next" /> 
 
    <input type="submit" value="submit" /> 
 
</form>

From the W3C:

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

«Для целей предыдущего абзаца элемент представляет собой поле , которое блокирует неявное представление элемента формы, если это элемент ввода, владельцем формы которого является этот элемент формы и атрибут типа которого находится в одном из следующих состояний : Текст, [...] "

Answer 2

Уточнение: я думаю, вы спрашиваете, почему ключ enter не отправляет форму, если есть два элемента input, но он отправляет форму, когда есть только один элемент input.

Я считаю, что это связано с природой форм (и, возможно, именно так, как работают браузеры). При отправке одного ввода формы вы можете быть уверены, что больше нет значений, поэтому клавиша ввода отправит форму. Если есть несколько входных данных, возможно, браузер не отправит форму на ключ enter, так как есть потенциально другая форма, с которой вы не закончили. Как правило, вам понадобится кнопка отправки на большинстве ваших форм, если нет, вы можете сделать так, как предложено в этом ответе: How to submit a form when the return key is pressed?

Answer 3

Это поведение явно указано в HTML5.

http://www.w3.org/TR/html5/forms.html#implicit-submission:

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

« Для целей предыдущего абзаца элемент представляет собой поле , которое блокирует неявное представление элемента формы, если это элемент ввода, владельцем формы которого является элемент формы и чья ре атрибута в одном из следующих состояний: Текст, [...]»

Оба ваших полей ввода являются type=text, поэтому браузер не имеет неявно отправить форму при нажатии клавиши ввода внутрь по поля.

Вы можете добавить keydown обработчика, который проверяет, была нажата клавиша, и вызывает submit метод формы или ваши функции в явном виде, когда этот ключ случается [enter] ключа. (Подробности об этом должны быть достаточно легкими для поиска через поиск.)