forms - 输入按钮作为提交

Question

我需要使用 enter 键提交表单，但是，我必须使用 BUTTON 而不是 SUBMIT 作为类型，以使页面不刷新。我怎样才能让我的 BUTTON 充当 SUBMIT 并在有人按下他们的 enter 键时被执行？

<form>
<input type=text ...>
<input type=button ...>
</form>

我发现的很多关于此的信息都提到了 Netscape/IE/许多过时的材料。

这是我的 HTML 输出，我希望隐藏提交按钮并使用 ENTER：

http://i.stack.imgur.com/Ohepe.png

Answer 1

启用 Javascript

<input type="button" onclick="this.form.submit()" ... /> 

应该管用

Answer 2

我必须使用 BUTTON 而不是 SUBMIT 作为类型才能使页面不刷新

不。使用submit刷新页面的普通按钮。（理想情况下，为了可访问性，让它工作！）然后添加渐进增强以在 JS 可用时用更流畅的东西替换表单的提交操作。在这种情况下，使用return false（或event.preventDefault()在 DOM 2 事件模型中）停止表单提交。

<form id="foo" method="POST" action="dosomething.script">
    ...
    <input type="submit" value="Do something"/>
</form>

document.getElement('foo').onsubmit= function() {
    beginAJAXSubmission();
    return false;
};

捕获submit表单的事件通常比尝试获取click按钮更好，因为它总是会在表单正常提交时触发，包括在 Enter 按键上。click在表单中的第一个提交按钮上通常会在 Enter 按键上触发，但是在某些情况下（取决于表单中的控件数量和它是什么浏览器）它不会发生，因此您最终可能会失败实际提交表单。

Answer 3

正如其他人所说，你必须使用Javascript。我推荐 JQuery 框架。

但我不明白刷新的事情？

通常的方法是点击提交，您的表单将通过请求发送到服务器。服务器处理数据并返回一个响应（HTML/JSon..etc）这个响应通常会被重定向到一个结果页面（以避免著名的关于刷新时重新发布的警告）。

现在，如果您的表单只是较大页面的一小部分，您可能希望使用 ajax 发布小表单，然后获取结果并更新您的 DOM。

综上所述，没有什么能阻止您对按钮使用提交类型，这实际上是使您的输入键默认为该操作的最佳方法。您所要做的就是使用 Jquery 并拦截表单的提交并进行 ajax 调用，而不是采用正常的方式。

你会发现很多使用 JQuery 的例子，因为它可能是最常用的 javascript 框架。

希望有帮助