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

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中明确指定了此行为。

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

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

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

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

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

Answer 3

澄清：我认为你问为什么当有两个input元素时， enter键不提交表单，但是当只有一个input元素时它确实提交了表单。

我相信这是由于表单的本质（也许只是浏览器的工作方式）。 提交单个表单输入时，您可以确定没有更多值，因此输入键将提交表单。 如果有多个输入，那么浏览器可能不会在enter键上提交表单，因为可能还有其他表单没有完成。 一般来说，无论如何你都需要在你的大多数表格上提交一个提交按钮，如果没有，你可以按照这个答案的建议做： 如何在按下返回键时提交表格？