表格有两个输入没有提交？

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>

来自W3C:

"如果表单没有提交按钮,那么如果表单有多个阻止隐式提交的字段,则隐式提交机制必须不执行任何操作,否则必须从表单元素本身提交表单元素."

"出于上一段的目的,元素是一个阻止表单元素隐式提交的字段,如果它是一个输入元素,其表单所有者是该表单元素,并且其type属性处于以下状态之一:Text,[ ...]"

Answer 2

HTML5 中明确指定了此行为。

\n

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

\n

\n

\xe2\x80\x9c如果表单没有提交按钮，则当表单有多个阻止隐式提交的字段时，隐式提交机制必须不执行任何操作，否则必须从表单元素本身提交表单元素。\xe2\ x80\x9d

\n

\xe2\x80\x9c出于上一段的目的，元素是阻止隐式提交的字段表单所有者是表单元素且其 type 属性处于以下状态之一的输入元素，则该元素是：文本，[\xe2\x80\xa6]\xe2\x80\x9d

\n

\n

您的两个输入字段都是，因此当您在字段中按 Enter 键时，type=text浏览器不允许隐式提交表单。

\n

您可以添加一个keydown处理程序来检查按下了哪个键，并submit在该键恰好是键时显式调用表单或函数的方法[enter]。（有关详细信息应该很容易通过搜索找到。）

\n