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

What button event should I use to confirm a html form?

本文关键字：确认 html 表单 事件 按钮 什么 我应该      更新时间：2023-09-26

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

我使用了这个元素：

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

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

当我使用

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

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

您仍然可以将"type="submit"与"e.preventDefault（）;"结合使用来执行重定向。

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

从您的澄清评论中：

发生的事情是，当我单击按钮时，表单中的值消失了，因此我了解到表单在没有任何值的情况下重新加载。

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

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

这很正常。

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

这不正常。正常是表单消失并被提交结果所取代。

但是您可以使用 submit 事件执行此操作，只需在 submit 事件中使用event.preventDefault()即可阻止表单提交：

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

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

您可以使用提交按钮，但您需要处理提交操作。 试试这个（使用 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>

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

$('#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
});
相关文章：