我应该使用什么按钮事件来确认 html 表单？答案

【问题标题】：What button event should I use to confirm a html form?我应该使用什么按钮事件来确认 html 表单？
【发布时间】：2016-07-10 10:01:22
【问题描述】：

使用 Javascript，没有框架，当我不想重定向时，我应该使用什么按钮事件来确认表单？我希望使用鼠标左键或键盘来确认表单。

我使用了这个元素：

<button type="button" value="1">Save</button>

将 type="submit" 与 "submit" 事件一起使用对我来说不是解决方案，因为这会创建重定向（from 的值丢失）。所以我使用类型“按钮”。

当我使用时

document.getElementById("advanced_form").addEventListener("click", saveOptions);

这个甚至“点击”是用鼠标使用的。但是用户可能会使用键盘而不是鼠标来提交表单。所以我怀疑表单不会对键盘确认操作做出反应。我没有发现任何与按下按钮相关的事件。那么如何解决这个问题呢？

【问题讨论】：

“将 type="submit" 与 "submit" 事件一起使用对我来说不是解决方案，因为这会创建重定向（来自的值丢失）”感觉。使用submit 事件不会神奇地导致任何“重定向”或表单值的丢失。您能否详细说明您使用它时的想法？ submit 是处理表单提交的正确事件。
我认为最好的方法是使用提交按钮。
@T.J. Crower：发生的事情是当我单击按钮时，表单中的值消失了，所以我理解表单被重新加载而没有任何值。但是值不应该消失，我需要的行为就像在普通浏览器窗口（WINAPI）中一样，所以当您需要保存选项时，页面不会清除值。如果我想关闭表单，我会关闭选项卡（html 页面）。

标签： javascript forms events

【解决方案1】：

您仍然可以将 'type="submit"' 与 'e.preventDefault();' 结合使用来避免重定向。

我希望这会有所帮助，祝你好运。

【讨论】：

当使用键盘或辅助技术提交表单时，type="submit" 按钮上的click 事件不会可靠地触发。它适用于某些浏览器中的某些表单，但它取决于表单内容和浏览器。 preventDefault 确实是解决方案，但不是 type="submit" 元素；使用表单的submit 事件。

【解决方案2】：

来自您的澄清评论：

发生的事情是，当我单击按钮时，表单中的值消失了，所以我知道表单被重新加载而没有任何值。

提交表单...提交表单。结果返回的内容完全取决于服务器发回的内容。

但值不应该消失，我需要的行为就像在普通浏览器窗口（WINAPI）中一样

这是正常的。

...页面不会清除这些值。如果我想关闭表单，我会关闭选项卡（html 页面）。

那不正常。正常是表单消失并被提交的结果替换。

但是您可以使用submit 事件来做到这一点，只需在submit 事件中使用event.preventDefault() 来阻止表单提交：

document.getElementById("the-form").addEventListener("submit", function(event) {
    event.preventDefault(); // Prevents the form from being submitted
});

无论用户使用鼠标、键盘还是辅助技术提交表单，该事件都会可靠地触发。当使用键盘或辅助技术提交表单时，提交按钮上的 click 事件将不会可靠地触发。

【讨论】：

为什么是服务器？？？我可以离线了！ JS 在客户端工作。这与服务器无关。
@user1141649：没关系，只是阻止默认操作（提交表单，它希望有某个地方可以提交它到）。请注意，您没有在任何地方提交的表单不寻常，因此提出问题将是非常有用的事情。
在浏览器扩展/插件中使用html表单+javascript而不发送到服务器是很常见的。
@user1141649：然而，编写扩展是不寻常的。再说一次，没什么大不了的，下次只需包含信息，以便人们在回答时知道。不改变上述基本原理：使用submit 事件，并取消默认操作。
对你来说这很不寻常。

【解决方案3】：

您可以使用提交按钮，但您需要处理提交操作。试试这个（使用 jquery）：

<input class="submit_button" type="submit" value="Save" />
<script>
function submit_form(e)
{
    if (check_form_submit()) {
        // check your data here

        $(this).submit();
        return;
    }
    e.preventDefault();
}
$(function() {
    $('.submit_button').parents('form').submit(submit_form);
});
</script>

【讨论】：

【解决方案4】：

您仍应使用提交输入类型，但您需要阻止默认操作，以便页面不会重新加载。如果您使用的是 jQuery，这个 sn-p 应该会有所帮助。

$('#my-form').submit(function(ev) {
ev.preventDefault(); // to stop the form from submitting
// Your code here
this.submit(); // If you want to submit at the end
});

【讨论】：