点击表单提交按钮时如何修改字段值？附排查过程与解决代码

回顾更新1的内容，当时已经接近解决问题，以下是最终可运行的解决方案：

<button type='submit' onclick="validate()" class='btn btn-default'>Submit</button>

<script>
validate = function() {
       document.getElementById('id_Price').value="2988.99"
}
</script>

这一版的尝试已经取得了部分进展，修正了事件绑定的错误：

<button type='submit' onclick="validate()" class='btn btn-default'>Submit</button>

<script>
validate = function() {
  console.log("Anything happening? (2)")
  // 以下写法存在语法错误，value是属性不是方法
  RoomBookingsForm['Price'].value()="2988.99"
  document.getElementById('id_Price').value()="2988.99"
}
</script>

点击提交按钮时如何修改表单上的字段值？最初尝试了以下两种写法，均未生效：

<button type='submit' class='btn btn-default'>Submit</button>
<script>
function submit(){
  // 错误用法：innerHTML不能用于修改输入框的值
  document.getElementById('id_Price').innerHTML()="2988.99"
  // 错误用法：value是属性不是方法，不需要加括号
  RoomBookingsForm['Price'].value()="2988.99"
  document.getElementById('id_Price').value()="2988.99"
}
</script>

<button type='submit' onsubmit='submitForm()' class='btn btn-default'>Submit</button>          
<script>
function submitForm(){
  document.getElementById('id_Price').innerHTML()="2988.99"
  RoomBookingsForm['Price'].value()="2988.99"
  document.getElementById('id_Price').value()="2988.99"
}
</script>

该功能的目标是根据用户浏览器的语言/时区设置在表单上展示对应格式的日期，但最终要以美国格式将日期存入后端。

核心问题说明 #

原始写法和更新1的写法之所以不生效，核心错误点如下：

• 混淆了属性和方法：value是表单输入元素的原生属性，不是可调用的方法，不需要加()执行，直接赋值即可
• 误用innerHTML：innerHTML用于修改DOM节点的内部HTML内容，表单输入框的值修改必须使用value属性
• 事件绑定错误：onsubmit是属于<form>标签的事件，绑定在提交按钮上不会触发，按钮点击事件需要绑定onclick才会生效

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