点击按钮自动提交了 Form 表单


点击按钮自动提交了 Form 表单

场景

在吾辈的写 HTML 时遇到了一个问题,一个普通的按钮,点击之后一旦在 click 事件中进行了 return,则立刻提交 Form 表单。

像下面这段代码,不管是点击 修改按钮 还是 _提交按钮_,Form 表单都会被提交(可以看到 alert 弹框)。

<form action="" id="form" onsubmit="submitFn()">
  <input type="text" name="username" placeholder="文本输入框" />
  <button onclick="updateFn()">修改</button> <button type="submit">提交</button>
</form>
<script>
  // 提交方法
  function submitFn() {
    alert('form 表单被提交了')
  }

  // 修改方法
  function updateFn() {
    const $username = document.querySelector('#form > input')
    if (!$username.value) {
      return false
    }
    $username.value = ''
  }
</script>

解决

后来经过同事提醒,在 MDN 找到了关于 button 按钮的解释,在 属性 => type 小结中,有下面这样一段内容

type
button 的类型。可选值:

  • submit: 此按钮将表单数据提交给服务器。如果未指定属性,或者属性动态更改为空值或无效值,则此值为默认值。
  • reset: 此按钮重置所有组件为初始值。
  • button: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本,当事件出现时可触发。
  • menu: 此按钮打开一个由指定 <menu> 元素进行定义的弹出菜单。

是的,当没有指定 button 元素的 type 属性时,浏览器将默认为 submit 而非 button,导致了在 Form 表单中容易出现奇怪的自动提交问题。

修改后的代码

<form action="" id="form" onsubmit="submitFn()">
  <input type="text" name="username" placeholder="文本输入框" />
  <!-- 实际上只是在这里加了一个 type="button" 属性而已 -->
  <button type="button" onclick="updateFn()">修改</button>
  <button type="submit">提交</button>
</form>
<script>
  // 提交方法
  function submitFn() {
    alert('form 表单被提交了')
  }

  // 修改方法
  function updateFn() {
    const $username = document.querySelector('#form > input')
    if (!$username.value) {
      return false
    }
    $username.value = ''
  }
</script>

实际上吾辈也只添加了一个 type 属性,但却因为这个问题耗费许久,终归是基础知识的坑踩得不够多。不过幸好,吾辈可以记录下来,避免在同一个坑里跌倒两次!


文章作者: rxliuli
版权声明: 本博客所有文章除特別声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 rxliuli !
 上一篇
JavaScript 使用递归异步的请求 JavaScript 使用递归异步的请求
JavaScript 使用递归异步的请求场景之前写了个 user.js 脚本来抓取百度网盘的文件元信息列表,用来进行二级查看和分析,脚本放到了 GreasyFork。最开始为了简化代码直接使用了 async/await 单线程进行异步请求,
2019-01-06 rxliuli
下一篇 
let 与 var 在 for 循环中的区别 let 与 var 在 for 循环中的区别
let 与 var 在 for 循环中的区别场景今天遇到的一个很有趣的问题,下面两段 js 代码执行的结果是什么? for (let i = 0; i < 3; i++) { setTimeout(() => console.lo
2018-12-27 rxliuli
  目录