返回

按钮总是提交表单？教你三招轻松解决！

javascript

按钮总是不小心提交表单？看我轻松解决它！

你有没有遇到过这种情况：网页上明明只是想点个按钮添加个表单项，结果整个页面直接刷新，辛辛苦苦填的信息全没了！ 😠 别急，今天我们就来解决这个烦人的问题——如何防止按钮意外提交表单。

罪魁祸首是谁？

说白了，问题就出在 HTML 的 <button> 元素身上。默认情况下，它的 type 属性值是 "submit"，这意味着点击它就会自动提交它所在的表单。这在处理简单的表单提交时很方便，但如果我们想用 JavaScript 来控制表单行为，它就变成了拦路虎。

见招拆招，我有妙计！

想要阻止按钮提交表单，我们可以用这几招：

1. 明确告诉浏览器：我不是提交按钮！

最直接的方法就是把按钮的 type 属性明确设置为 "button"。这样浏览器就知道，点击这个按钮只是执行 JavaScript 函数，不会提交表单。

<button type="button" onclick="addItem()">添加一项</button>
<button type="button" onclick="removeItem()">删除最后一项</button>

2. JavaScript 大显身手：阻止默认行为！

我们还可以在 JavaScript 函数中使用 event.preventDefault() 方法，阻止按钮的默认行为（也就是提交表单）。

function addItem(event) {
  // ... 其他代码 ...

  event.preventDefault(); // 阻止表单提交
}

function removeItem(event) {
  // ... 其他代码 ...

  event.preventDefault(); // 阻止表单提交
}

小贴士: 要让 event 对象在函数中可用，需要把它作为参数传递给事件处理函数，就像这样：

<button onclick="addItem(event)">添加一项</button>

3. 眼不见心不烦：把按钮移出表单！

如果按钮跟表单没关系，那就干脆把它移到表单元素外面。这样点击按钮就不会影响表单的行为。

<form>
  <!-- 表单内容 -->
</form>

<button onclick="addItem()">添加一项</button>
<button onclick="removeItem()">删除最后一项</button>

实战演练：代码示例

光说不练假把式，下面我们就来实战演练一下，看看如何用上面的方法防止按钮提交表单：

<!DOCTYPE html>
<html>
<head>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script>
    function addItem(event) {
      // ... 其他代码 ...

      event.preventDefault(); // 阻止表单提交
    }

    function removeItem(event) {
      // ... 其他代码 ...

      event.preventDefault(); // 阻止表单提交
    }
  </script>
</head>
<body>
  <form autocomplete="off" method="post" action="">
    <p>    <button type="button" onclick="addItem(event)">添加一项</button>
    <button type="button" onclick="removeItem(event)">删除最后一项</button>
    <table>
      <th>姓名</th>
      <tr>
        <td><input type="text" id="input1" name="input1" /></td>
        <td><input type="hidden" id="input2" name="input2" /></td>
      </tr>
    </table>
    <input id="submit" type="submit" name="submit" value="提交">
  </form>
</body>
</html>

总结一下

防止按钮提交表单是网页开发中经常遇到的问题。通过设置按钮类型、使用 preventDefault() 方法或者将按钮移出表单，我们可以轻松解决这个问题，让表单按预期工作。

常见问题解答

1. 为什么我的按钮还是会提交表单？

检查一下你的代码，看看是不是：

  • 按钮的 type 属性没有设置为 "button"。
  • event.preventDefault() 方法没有正确调用。
  • 按钮仍然在表单元素内部。

2. 除了 event.preventDefault()，还有其他方法阻止默认行为吗？

有的，你还可以使用 return false; 语句来阻止默认行为。

3. 我应该使用哪种方法来防止按钮提交表单？

这取决于你的具体需求。如果按钮只是用来执行 JavaScript 函数，那就把 type 属性设置为 "button"。如果按钮需要根据条件决定是否提交表单，那就使用 event.preventDefault() 方法。

4. event 对象是什么？

event 对象包含了关于事件的信息，比如事件类型、事件目标等等。在事件处理函数中，你可以通过 event 对象访问这些信息。

5. 我可以在哪里学习更多关于 JavaScript 事件处理的知识？

你可以在 Mozilla Developer Network (MDN) 网站上找到关于 JavaScript 事件处理的详细文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Event