Form With Two Inputs Not Submitting?

Could someone please explain why this code isn't working: $('form').on('submit', function (e) { e.preventDefault(); var first = $('.first').val(); var next = $('.next'

Solution 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, […]”

Solution 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.)

Solution 3:

Clarification: I think you're asking why the enter key doesn't submit the form when there are two input elements, but it does submit the form when there is only one input element.

I believe it's due to the nature of forms (and maybe just the way that browsers work). When submitting a single form input you can be sure that there is no more values to comes so an enter key will submit the form. If there's more than one input, then perhaps the browser doesn't submit the form on the enter key as there's potentially another form you're not done with. Generally, you'll want a submit button on most of your forms anyway, if not, you could do as suggested in this answer: How to submit a form when the return key is pressed?