JavaScript 如何禁用表单提交按钮

表单是web开发的关键部分，它们允许用户向服务器提交数据。然而，有时我们希望自定义HTML表单的行为，并阻止默认行为发生。这样可以创建一个更交互性和用户友好的web应用程序。在本文中，我们将讨论不同的方法来阻止按钮提交表单，以及示例和语法。

有多种方法可以阻止按钮提交表单。以下是两种常用方法：

方法1：使用“event.preventDefault()”方法

此方法使用 event.preventDefault() 方法来阻止提交按钮的默认行为。该方法在按钮点击事件监听器中调用，它停止表单的提交。

语法：

const button = document.querySelector('button');

button.addEventListener('click', (event) => {
      event.preventDefault();
      // Custom logic
});

例子: 在这个例子中，我们使用“ event.preventDefault() ”方法来阻止 submit 按钮的默认行为。按钮的 clicks 事件监听器包含了表单提交的自定义逻辑。

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
          Disable submit button on form submit 
      </title> 
</head> 
  
<body> 
    <form> 
        <input type="text" 
               name="username" 
               placeholder="Username"> 
        <br><br> 
        <input type="password" 
               name="password" 
               placeholder="Password"> 
        <br><br> 
        <button type="submit" 
                id="clk"> 
            Submit 
        </button> 
    </form> 
  
    <script> 
        const button =  
              document.querySelector("form"); 
        document 
            .getElementById("clk") 
            .addEventListener("click", (event) => { 
                event.preventDefault(); 
            }); 
    </script> 
</body> 
  
</html>

输出：

JavaScript 如何禁用表单提交按钮

方法2：使用“button”元素代替“submit”元素

这是另一种方法，我们将使用“button”元素代替“submit”元素。button元素通常用于触发JavaScript函数，而input类型的submit元素用于提交表单。通过使用button元素，默认情况下不会提交表单，您可以将自定义逻辑添加到按钮点击事件中。

语法：

<button type="button" onclick="submitForm()">
    Submit
</button>

示例: 在此示例中，我们使用“ 按钮 ”元素而不是“ 提交 ”元素。按钮元素触发一个名为“ submitForm() ”的JavaScript函数。此函数包含自定义的表单提交逻辑。

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        Disable submit button on form submit 
    </title> 
</head> 
  
<body> 
    <form> 
        <input type="text" 
               name="username" 
               placeholder="Username" /> 
        <br><br> 
        <input type="password" 
               name="password" 
               placeholder="Password" /> 
        <br><br> 
        <button type="button" 
                onclick="submitForm()" 
                id="clk"> 
            Submit 
        </button> 
    </form> 
  
    <script> 
        function submitForm() { 
            document.getElementById("clk").disabled = true; 
        } 
    </script> 
</body> 
  
</html>

输出：

JavaScript 如何禁用表单提交按钮