如何使用JavaScript停止表单提交？

在本教程中，我们将看到如何使用JavaScript停止表单提交的方法。通常，如果我们尝试使用某些事件执行一些操作，HTML表单会默认自动提交。表单的自动提交会导致浏览器刷新和重新加载整个页面，这些情况下我们不想执行。因此，为了在提交之前执行任何操作，我们需要改变表单的默认行为以防止提交。

以下是我们可以使用的停止表单提交的方法 –

使用” return false “值
使用 preventDefault() 方法

让我们逐个讨论它们并附上代码示例。

使用”return false”值

给 onsubmit 事件赋予” return false; “值可以阻止表单提交。将此值赋予该事件会使表单无返回并阻止其提交以及刷新浏览器。

语法

使用return false值停止表单提交的语法如下 –

<form onsubmit="return false;">
   //content of form tag
</form>

算法

步骤1 - 在HTML文档中的第一步中，我们将定义一个form标签，并给它一个 onsubmit 事件，值为 return false ，如上面的语法所示。
步骤2 - 在下一步中，我们可以定义在表单提交之前要执行的操作。
步骤3 - 在第三步中，我们将通过更新一些文本而不刷新浏览器，向用户证明表单未被提交。

示例

以下示例将说明使用 onsubmit 事件和返回”false”值的用法 –

<!DOCTYPE html>
<html>
<body>
   <h3>Stop form submission using JavaScript?</h3>
   <form onsubmit="return false;">
      <input type="text">
      <p id="result">Button is not clicked yet!!</p>
      <button onclick="display()">Change above text</button>
   </form>
   <script>
      function display() {
         let result = document.getElementById("result");
         result.innerHTML = "<b>The button is clicked and form is not submitted yet.</b>"
      }
   </script>
</body>
</html>

在这个例子中，我们通过点击按钮来改变按钮上方的文本，以向用户展示在提交表单之前执行某些操作时，既不会提交表单，也不会刷新浏览器。

使用preventDefault()方法

在JavaScript中，我们提供了一个内置的 preventDefault()方法，用于阻止表单的提交并阻止浏览器在执行某个任务时刷新自身。

有两种方法可以使用 preventDefault() 方法来阻止表单提交 –

通过将其作为 onsubmit 事件的值使用。
通过在事件的回调函数中使用它。

让我们详细了解这两种方法。

通过将其作为onsubmit事件的值使用

我们可以将 event.preventDefault() 方法作为 onsubmit 事件的值传递，就像在上一种方法中将 return false; 作为其值传递一样。

语法

以下语法用于将 event.preventDefault 的值赋给 onsubmit 事件 –

<form onsubmit="event.preventDefault();">
   //content of the form tag
</form>

让我们通过程序示例来看看相同方法的实际实现。

注意： 此算法和上述方法的算法几乎相同。您只需要从以前的示例中将 ** onsubmit** 事件的值从”return false”更改为 event.preventDefault(); 。

示例

下面的代码是我们上面讨论的方法的实际实现，即event.preventDefault()方法：

<!DOCTYPE html>
<html>
<body>
   <h3>Stop form submission using JavaScript? </h3>
   <form onsubmit="event.preventDefault();">
      <input type="text">
      <p id="result">Button is not clicked yet!!</p>
      <button onclick="display()">Change above text</button>
   </form>
   <script>
      function display() {
         let result = document.getElementById("result");
         result.innerHTML = "<b>The form is secured from submission using the preventDefault() method.</b>"
      }
   </script>
</body>
</html>

在上面的例子中，我们将event.preventDefault()作为onsubmit事件的值传递，该事件负责阻止表单提交和浏览器刷新。

通过在回调函数中使用 event.preventDefault()

使用这种方法，我们不需要使用 onsubmit 事件，而是可以在所需事件的回调函数中使用 preventDefault() 方法，在表单提交之前使其生效。

语法

以下语法显示了如何在回调函数中使用 preventDefault() －

function callback(event){
   event.preventDefault()
}

算法

步骤1 - 第一步将涉及在HTML文档中定义表单标签和其他必需元素。
步骤2 - 在这一步中，我们将定义事件的回调函数，并在其中使用 event.preventDefault ，如上面的语法所示。
步骤3 - 在第三步中，我们只需将函数分配给事件，当事件被触发时调用该函数。

让我们通过编程示例来理解。

示例

以下代码将解释如何在事件的回调函数中使用 preventDefault() 。

<!DOCTYPE html>
<html>
<body>
   <h3>Stop form submission using JavaScript?</h3>
   <form>
      <input type="text">
      <p id="result">Button is not clicked yet!!</p>
      <button onclick="display()">Change above text</button>
   </form>
   <script>
      function display() {
         event.preventDefault();
         let result = document.getElementById("result");
         result.innerHTML = "<b>The form is secured from submission using the preventDefault() method inside callback function.</b>"
      }
   </script>
</body>
</html>

在这个示例中，我们定义了 display() 函数，并在其中使用了 event.preventDefault() ，它可以防止浏览器刷新和表单提交。在定义函数之后，我们将它分配给与按钮标记关联的 onclick 事件，这个事件在按下按钮时触发，并同时调用该函数。

在本教程中，我们学习了使用JavaScript停止表单提交的方法，并通过代码示例了解了它们的实际实现，这些示例展示了这些方法的使用，并证明操作是在表单提交之前执行的。