纯Javascript如何不依赖PHP实现表单提交后保留输入内容

问题原因 #

type="submit"的按钮默认会触发表单提交行为，浏览器没有指定form的action属性时会默认重载当前页面，页面刷新后输入框的内容自然会清空，同时你写的打印逻辑执行后也会因为页面刷新被清除。

解决方案 #

方案1：阻止提交的默认行为 #

在事件回调中调用preventDefault()禁用默认的表单提交刷新逻辑即可，修改后的JS代码如下：

const button = document.getElementById("button")
button.addEventListener("click", calculate)

// 接收事件对象参数e
function calculate (e) {
   // 阻止默认刷新行为
   e.preventDefault()
   let someNum = document.getElementById("someNum").value
   console.log(someNum)
}

方案2：修改按钮为普通按钮 #

如果你不需要提交表单到服务端，只是做前端逻辑处理，直接把按钮的类型从submit改成普通的button就不会触发默认提交行为：

<!-- 修改HTML中按钮的type属性 -->
<input type="button" id="button" value="Submit">

这种方案不需要修改你原来写的JS代码就能正常运行。

提示：后续需要保留表单提交能力的场景选方案1，仅做前端本地逻辑处理选方案2更简洁。

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