提交表单后清空字段弹出必填提示的问题如何解决？

弹窗提示原因 #

• 提交按钮使用了type="submit"属性，点击后的执行逻辑顺序为：
  1. 执行onclick绑定的myCreateFunction()，读取表单内容插入表格
  2. 执行onclick绑定的myClearFunction()，清空所有表单字段的值
  3. 触发浏览器默认的表单提交行为，此时表单字段已经为空，又因为所有表单元素都设置了required必填属性，原生表单校验规则触发，就会弹出please fill this field的提示。

修复方法 #

有两种可选用的修复方案：

方案一：阻止表单默认提交行为 #

可以任选一种实现方式：

1. 在提交按钮的onclick事件末尾添加return false，取消后续默认提交动作：

<input type="submit" value="Submit" id="btn_submit" onclick="myCreateFunction();myClearFunction();return false;">

2. 给表单绑定submit事件，主动阻止默认提交：

// 请将选择器替换为你实际的表单选择器
document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault()
})

方案二：修改提交按钮类型为普通按钮 #

直接把按钮的type属性从submit改为button，就不会触发表单默认的提交和校验逻辑：

<input type="button" value="Submit" id="btn_submit" onclick="myCreateFunction();myClearFunction();">

内容的提问来源于stack exchange，提问作者Dimuth De Zoysa