Form with two inputs not submitting?

Question

Could someone please explain why this code isn't working:

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

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

http://jsfiddle.net/cj1hysf3/

It seems to work fine when I remove one of the two inputs but having them both there messes it up.

Answer 1

You need a submit button. You can hide it if you want but for enter to submit a form by default, it needs to be there.

$('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:

“If the form has no submit button, then the implicit submission mechanism must do nothing if the form has more than one field that blocks implicit submission, and must submit the form element from the form element itself otherwise.”

“For the purpose of the previous paragraph, an element is a field that blocks implicit submission of a form element if it is an input element whose form owner is that form element and whose type attribute is in one of the following states: Text, […]”

Answer 2

This behavior is explicitly specified in HTML5.

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

“If the form has no submit button, then the implicit submission mechanism must do nothing if the form has more than one field that blocks implicit submission, and must submit the form element from the form element itself otherwise.”

“For the purpose of the previous paragraph, an element is a field that blocks implicit submission of a form element if it is an input element whose form owner is that form element and whose type attribute is in one of the following states: Text, […]”

Both of your input fields are of type=text, so the browser is not allowed to implicitly submit the form when you press enter inside on the fields.

You could add a keydown handler that checks which key was pressed, and calls the submit method of the form or your function explicitly when that key happens to be the [enter] key. (Details about that should be easy enough to find through search.)