Flask建站时如何用JavaScript在表单提交前添加客户端本地日期？

存在的问题 #

• 表单ID不匹配：你的表单id属性为form，但JS代码第二个方案中调用了getElementById("myform")，找不到对应DOM节点，自然无法生效
• 动态创建input的属性设置错误：第一种方案中你把name属性写成了自定义属性local date，没有设置正确的name和value属性，表单提交时不会携带这个参数
• 混淆了原生JS和jQuery语法：第二种方案中使用的.html()是jQuery专属方法，原生JS没有该API，正确原生写法为.innerHTML，且直接覆盖表单HTML会清空用户已填写的表单内容，完全不推荐使用
• onsubmit事件没有返回值：你在onsubmit中绑定了return addTime()，但addTime函数没有返回true，会直接阻止表单默认提交行为
• 日期值没有标准化：直接将new Date()传入value会输出本地格式字符串，不同浏览器表现不一致，建议转为标准格式
• 手动调用form.submit()多余：onsubmit事件只要返回true，浏览器会自动完成提交，手动调用submit反而会跳过后续的表单校验逻辑

正确实现代码 #

HTML表单代码 #

<form id="orderForm" onsubmit="return addLocalTime()" method="post">
  <!-- 你原有表单的其他内容 -->
  <button type="submit">提交订单</button>
</form>

JavaScript代码 #

<script type="text/javascript">
function addLocalTime() {
  // 获取表单节点，注意ID和表单保持一致
  const form = document.getElementById('orderForm');
  // 创建隐藏的input元素，不需要展示给用户
  const timeInput = document.createElement('input');
  // 设置name属性，Flask后端可以通过request.form.get('local_date')获取
  timeInput.name = 'local_date';
  timeInput.type = 'hidden';
  // 转为标准ISO格式时间，后端解析更方便
  timeInput.value = new Date().toISOString();
  // 追加到表单中
  form.appendChild(timeInput);
  // 返回true允许表单正常提交
  return true;
}
</script>

后端获取参数方式（Flask） #

from flask import request

@app.route('/submit_order', methods=['POST'])
def submit_order():
    local_date = request.form.get('local_date')
    # 后续业务逻辑

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