表单提交时输入字段值重置问题排查与解决请求

问题根源 #

FormStack内置脚本逻辑可能会在字段获得焦点时自动清空值，同时对隐藏字段有特殊校验，非用户交互输入的值容易被重置。

解决方案 #

1. 阻止字段的focus清空行为

直接拦截字段的focus事件，避免内置逻辑触发清空：

const field = document.getElementById('field123456789');
// 添加捕获阶段的事件监听，阻止默认行为和事件传播
field.addEventListener('focus', (e) => {
  e.preventDefault();
  e.stopImmediatePropagation();
}, true);
// 赋值
field.value = 'code-calculate-value';

2. 设置字段为只读

既然字段初始是隐藏的，设置为只读可以避免用户触发focus事件，同时保留赋值内容：

const field = document.getElementById('field123456789');
field.readOnly = true;
field.value = 'code-calculate-value';

3. 表单提交前重新赋值

在表单提交的瞬间重新给字段赋值，覆盖可能被清空的内容：

const form = document.querySelector('form');
form.addEventListener('submit', () => {
  const field = document.getElementById('field123456789');
  field.value = 'code-calculate-value'; // 如果是动态值，可提前存在变量中
});

4. 检查FormStack后台设置

• 进入字段编辑页面，确认提交时包含此字段选项已开启；
• 关闭可能存在的“仅允许用户手动输入”类限制，这类设置会自动清空脚本赋值的内容。

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