如何禁止html表单在提交时导航

How to disable html form from navigating on submit?

本文关键字：表单 提交 导航 html 何禁止 禁止      更新时间：2023-09-26

假设我有这个表单

<form onsubmit="submitData();">
    <input type="text" pattern="^[A-z]+$" required>
    <button type="submit">OK</button>
</form>

单击提交按钮后，我不希望表单在地址栏中发布任何数据或导航到任何地方，我只希望它运行submitData功能，仅此而已。我之所以要使用表单，是因为它具有验证功能（如果输入文本丢失或与模式不匹配，它不会允许您提交）。

如果我将表单上onsubmit的值切换为"return false；"，那么它将无法导航，但"submitData（）；return false；；"不起作用。还有其他想法吗？

尝试在代码开头添加e.preventDefault();，并将事件传递给function submitData(e) {，如下所示：

function submitData(e) {
    e.preventDefault();
    ...
}

请参阅：https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault

只需将表单自动传递的event.preventDefault添加到函数：

function submitData(event){
   event.preventDefault();    
   //your code will be here
}

阅读更多：https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault

使用event.preventDefault()。

了解更多信息：https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault

将其添加到您的代码中：

document.getElementById("addYourTagHERE").addEventListener("onsubmit", function(event){
        event.preventDefault()
    });

或者这个在你的功能：

function submitData(event) {
    event.preventDefault();
}

您希望取消提交event处理程序的默认操作，因此：

function submitData() {
    // whatever logic you have...
    return false;
}

我相信这也有效：

function submitData( e ) {
    e.preventDefault();
    // whatever logic you have...
}
相关文章：