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

您需要一个提交按钮。如果你愿意，你可以隐藏它，但是默认情况下输入提交表单，它需要在那里。

＆＃13;

$('form').on('submit', function (e) {
    e.preventDefault();

    var first = $('.first').val();
    var next = $(".next").val();
    alert(first + " " + next);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

From the W3C：

“如果表单没有提交按钮，那么如果表单有多个字段阻止隐式提交，则隐式提交机制必须不执行任何操作，并且必须从表单元素提交表单元素否则就是这样。“

“出于上一段的目的，元素是一个字段，如果表单元素的表单所有者是表单元素且其类型属性是，那么它将阻止表单元素的隐式提交。处于以下状态之一：文本，[...]“

Answer 2

此行为在HTML5中明确指定。

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

“如果表单没有提交按钮，那么如果表单有多个字段阻止隐式提交，则隐式提交机制必须不执行任何操作，并且必须从表单元素提交表单元素否则就是这样。“

“出于上一段的目的，元素是一个字段，如果表单元素的表单所有者是表单元素且其类型属性是，那么它将阻止表单元素的隐式提交。处于以下状态之一：文本，[...]“

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

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

Answer 3

澄清：我认为你问为什么enter密钥在有两个input元素时没有提交表单，但是当只有一个{{1}时它确实提交了表单元素。

我认为这是由于表单的性质（也许只是浏览器的工作方式）。提交单个表单输入时，您可以确定没有更多值，因此输入键将提交表单。如果有多个输入，那么浏览器可能不会在input键上提交表单，因为可能还有其他表单没有完成。一般来说，无论如何，您都需要在大部分表单上提交提交按钮，否则，您可以按照以下答案中的建议进行操作：How to submit a form when the return key is pressed?

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

3 个答案: