未设置type=submit属性的button点击后提交表单该如何解决

原因说明 #

你对表单按钮的行为认知存在偏差：根据HTML标准规范，位于<form>标签内部的<button>元素，默认type属性值为submit，哪怕你没有手动写type="submit"，点击也会触发表单提交行为。

修复方案 #

有两种常用的修复方式：

• 方案1：显式指定按钮type为普通按钮
  直接给上传按钮添加type="button"属性，覆盖默认的submit行为，修改后的代码如下：

<button type="button" id="upload_widget" class="button">Upload Photo</button>

• 方案2：在点击事件中阻止默认行为
  如果不想修改按钮的属性，也可以在绑定的点击事件逻辑中阻止默认的表单提交行为，JS示例代码：

const uploadBtn = document.getElementById('upload_widget')
uploadBtn.addEventListener('click', function(e) {
  // 阻止默认提交
  e.preventDefault()
  // 你原来的上传图片逻辑写在下面
})

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