带有两个输入的表单未提交？答案

【问题标题】：Form with two inputs not submitting?带有两个输入的表单未提交？
【发布时间】：2015-02-25 00:41:39
【问题描述】：

有人可以解释为什么这段代码不起作用：

$('form').on('submit', function (e) {
    e.preventDefault();

    var first = $('.first').val();
    var next = $(".next").val();
    alert(first + " " + next);
});

http://jsfiddle.net/cj1hysf3/

当我删除两个输入之一但将它们都放在那里时，它似乎工作正常。

【问题讨论】：

提交事件的默认操作是提交表单，当您调用e.preventDefault() 时，您将删除该功能:)
jsfiddle.net/arunpjohny/cj1hysf3/1 ?
我认为 OP 只是希望警报来...不是进行真正的表单提交而是触发处理程序

标签： javascript jquery forms

【解决方案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:

“如果表单没有提交按钮，那么如果表单有多个阻止隐式提交的字段，则隐式提交机制必须什么都不做，并且必须从表单元素提交表单元素否则自己。”

“对于上一段的目的，如果元素是表单所有者是表单元素并且其类型属性为处于以下状态之一：文本，[…]”

【讨论】：

【解决方案2】：

此行为在 HTML5 中明确指定。

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

“如果表单没有提交按钮，那么如果表单有多个阻止隐式提交的字段，则隐式提交机制必须什么都不做，并且必须从表单元素提交表单元素否则自己。”

“对于上一段的目的，如果元素是表单所有者是表单元素并且其类型属性为处于以下状态之一：文本，[…]”

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：