输入按钮作为提交答案

【问题标题】：Input Button as SUBMIT输入按钮作为提交
【发布时间】：2011-10-20 07:41:19
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： forms button input submit enter

【解决方案1】：

启用 Javascript

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

应该工作

【讨论】：

它没有。见附上的链接。

【解决方案2】：

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

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

<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 按键上触发，但在某些情况下（取决于表单中的控件数量和它是什么浏览器）它不会不会发生，因此您最终可能无法实际提交表单。

【讨论】：

我必须让它不要刷新，因为这是将其用作聊天室的一种方式。
返回 false 将停止刷新，或者如果您将 e 作为参数传递，您也可以使用 e.preventDefault() 来停止它。
@Jessica：我们不能从渲染的 HTML 的屏幕截图中看到太多，但是，我可以再次向您保证，您使用 return false/ 响应其 submit 事件的表单preventDefault 不会导致页面重新加载。
@bobince 我可以通过电子邮件向您发送我的代码吗？让别人看看真的很有帮助。
同样，事件处理函数中的return false; 语句将停止事件的默认操作。停止表单提交意味着没有页面重新加载。我想这就是你所说的。如果您想在发送内容时停止更新聊天窗口，只需省略 .html(data) 调用即可。

【解决方案3】：

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

但是我不明白刷新的东西？

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

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

说了这么多，没有什么能阻止你为按钮使用提交类型，这实际上是让你的输入键默认这个动作的最好方法。您所要做的就是使用 Jquery 并拦截表单的提交并进行 ajax 调用，而不是按照正常方式进行。

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

希望对你有帮助

【讨论】：