如何阻止表单提交?

htmlweb developmentfront end technology更新于 2024/7/19 10:52:17

我们可以轻松地使用 event.preventDefault() 或在提交事件处理程序中返回 Flase 来阻止网页上的表单提交。让我们逐个查看示例 -

使用 event.preventDefault() 阻止表单提交

要阻止表单提交，请使用 event.preventDefault()，即 -

<form onsubmit="event.preventDefault();">

示例

让我们查看完整示例 -

<!DOCTYPE html>
<html>
<body> 
   <h1>Details</h1>
   <form onsubmit="event.preventDefault();">
      <p>Select the subject you want to choose:</p>
      <div>
         <input type="radio" id="prog" name="subject" value="prog">
         <label for="prog">Programming</label>
         <input type="radio" id="dev" name="subject" value="dev">
         <label for="dev">Web Development</label>        
         <input type="radio" id="db" name="subject" value="db">
         <label for="db">Database</label>
      </div><br/>
      <div>
         <button id="submit" type="submit">Submit</button>
      </div>
      </form>
</body>
</html>

输出

选择任意选项并点击"提交"。表单将无法提交 -

使用 return false on submit 事件处理程序阻止表单提交

要阻止表单提交，请使用 return false on submit 事件处理程序 -

<form onsubmit="return false;">

示例

查看完整示例 -

<!DOCTYPE html>
<html>
<body> 
   <h1>Details</h1>
   <form onsubmit="return false;">
      <p>Select the subject you want to choose:</p>
      <div>
         <input type="radio" id="prog" name="subject" value="prog">
         <label for="prog">Programming</label>
         <input type="radio" id="dev" name="subject" value="dev">
         <label for="dev">Web Development</label>
         <input type="radio" id="db" name="subject" value="db">
         <label for="db">Database</label>
      </div><br/>
      <div>
         <button id="submit" type="submit">Submit</button>
      </div>
   </form>
</body>
</html>