javascript - 具有两个输入的表单未提交？

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 :

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