本文详解为何原生按钮点击后通过 JavaScript 延迟触发 form.submit() 会导致 name/value 丢失，并提供可靠解决方案：使用隐藏 预先捕获按钮值，确保延迟提交时表单数据完整。
本文详解为何原生按钮点击后通过 javascript 延迟触发 `form.submit()` 会导致 `name/value` 丢失，并提供可靠解决方案：使用隐藏 `` 预先捕获按钮值，确保延迟提交时表单数据完整。
在 HTML 表单中，当用户点击
根本原因在于：submit 事件本身不携带按钮上下文；它只提交当前表单中已存在的可提交控件（、
✅ 正确解法是主动将按钮值“落地”为表单内一个持久化的可提交字段。最简洁可靠的方式是添加一个 type="hidden" 输入框，并在按钮点击时立即赋值：
注意：此处将按钮设为 type="button"（而非默认 submit），避免其触发原生提交，完全交由 JS 控制流程。点击时立即更新隐藏域：
$('button').click(function() {
const clickedValue = this.value;
$('#choice-input').val(clickedValue); // ✅ 关键：提前写入表单数据
$('#msg').text(`Submitting "${clickedValue}" in 2 seconds.`);
setTimeout(() => {
$('form').trigger('submit'); // 此时 hidden input 已含有效值，必被提交
}, 2000);
});
同时需阻止默认提交（防止用户快速连点导致多次提交）：
$('form').on('submit', function(e) {
if (isSubmitting) {
e.preventDefault(); // 防重复提交
}
});
? 关键注意事项：
- 不要依赖 event.submitter（兼容性差，旧版 Safari/IE 不支持）；
- 避免在 setTimeout 回调中动态创建或修改 DOM 节点再提交——时机不可控；
- 隐藏域 name 必须与原按钮 name 一致，确保后端接收逻辑无需变更；
- 若表单含多个提交场景，建议为每个按钮绑定独立逻辑，或统一用 data-* 属性标识。
此方案完全符合 HTML 表单语义，兼容所有现代浏览器，且无需修改后端解析逻辑——提交结果与原生点击行为完全一致：?choice=True 或 ?choice=False。
