为何submit事件分别绑定在表单和按钮上的运行行为存在差异？

问题1：按钮绑定submit事件无效导致页面重载 #

submit是仅属于表单元素（<form>）的事件，按钮（<button>/<input type="submit">）本身不会触发submit事件，你给btnPricecheck绑定submit事件的代码根本不会执行，对应的event.preventDefault()自然也不会生效，点击按钮就会触发浏览器默认的表单提交行为，重载页面清空输入内容。

解决方法 #

两种方案选一个即可：

• 保留submit事件的绑定逻辑，只给表单formQuote绑定submit事件即可
• 要是想单独给按钮绑定事件，把事件类型改成click即可，原有event.preventDefault()逻辑保留：

btnPricecheck.addEventListener('click', (event) => {
  // 原有逻辑不变
})

问题2：日期取值无效的原因 #

你写的document.getElementById["fromDate"].value是语法错误，getElementById是DOM方法，调用需要用圆括号传参，不是方括号：

// 错误写法
fromDate = document.getElementById["fromDate"].value;
// 正确写法
fromDate = document.getElementById("fromDate").value;

如果用formQuote.elements["fromDate"].value取不到值，检查两个点：

• 表单内的日期输入控件的name属性是不是设置为fromDate，form.elements是通过控件的name属性匹配的
• 确保代码执行时，表单和对应的输入控件已经完成渲染，没有被动态移除或者修改属性

另外你代码里的btnPricecheck、btnEnquiry、fromDate等变量都没有加let/const声明关键字，会变成全局变量，容易出现变量污染问题，建议补上声明。

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