表单内绑定onClick事件的按钮点击自动提交表单如何解决

问题原因 #

HTML 规范中，位于 <form> 标签内的 <button> 元素如果未显式声明 type 属性，默认值为 submit，因此点击时会自动触发表单提交逻辑。

解决方案 #

推荐按优先级选择以下方案：

• 方案1（最优，改动最小）：给按钮显式指定 type="button"，修改后代码如下：

<button class="btn btn-info" id="calculate" type="button" onclick="calculate()"> Calculate </button>

指定type为普通按钮后，点击不会触发表单提交行为。

• 方案2：在点击事件中阻止默认行为，有两种实现方式：
  1. 在内联onclick末尾加return false：

  <button class="btn btn-info" id="calculate" onclick="calculate(); return false;"> Calculate </button>
  

  2. 在calculate函数内阻止默认事件，需要先把事件对象传入函数：

  <button class="btn btn-info" id="calculate" onclick="calculate(event)"> Calculate </button>
  

  对应JS逻辑：

  function calculate(e) {
    e.preventDefault();
    // 原有计算逻辑
  }
  

内容的提问来源于stack exchange，提问作者Caravansary