为何JavaScript的form.submit()在Safari中无法立即提交表单？

问题场景 #

我在网站表单里用了一些<select>字段，平时设为禁用状态防止用户修改，但提交表单时需要把这些字段的数据发给服务器。于是用JS拦截表单提交事件，执行以下逻辑：阻止默认提交 → 启用字段 → 提交表单 → 再次禁用字段。代码如下：

function toggleDisableOnFields(areDisabled) {
  document.getElementsByName("x")[0].disabled = areDisabled;
  // 其他字段也在这里处理
}
const form = document.getElementById("form");

form.addEventListener("submit", (e) => {
  e.preventDefault();

  toggleDisableOnFields(false);
  form.submit();
  toggleDisableOnFields(true);
});

这段代码在Chrome和Firefox里正常工作：字段启用后表单提交，数据能正确发送，之后字段也会被重新禁用。但在Safari里出了问题——表单实际是在字段被重新禁用之后才发送的，导致禁用字段的数据没被提交到服务器。如果删掉toggleDisableOnFields(true);这一行，Safari就能正常发送包含该字段数据的表单，说明表单提交确实被延迟到这行执行之后了。试过把submit改成异步（加await和async）也没用，应该是浏览器处理表单提交的方式有差异导致的。

原因分析 #

Safari对form.submit()的处理和Chrome/Firefox不同：它不会立即触发表单数据的收集和请求发送，而是将提交操作排入事件队列，等到当前同步代码执行完毕后才会处理。这就导致在form.submit()之后立即执行的toggleDisableOnFields(true)会先把字段改回禁用状态，等到Safari处理提交时，读取的已经是禁用字段的值（不会被提交）。

解决方案 #

方法1：延迟禁用操作到下一个事件循环 #

利用setTimeout把禁用字段的操作放到当前同步代码执行完之后，确保Safari已经读取了启用后的字段值再执行禁用：

form.addEventListener("submit", (e) => {
  e.preventDefault();

  toggleDisableOnFields(false);
  form.submit();
  // 延迟到下一个事件循环再禁用字段，0毫秒足够触发队列调度
  setTimeout(() => {
    toggleDisableOnFields(true);
  }, 0);
});

方法2：手动构建FormData提交（最可靠） #

绕过浏览器的表单提交机制，手动收集所有字段数据（包括禁用字段），用fetch或XMLHttpRequest发送请求，全程不需要修改字段的禁用状态：

form.addEventListener("submit", (e) => {
  e.preventDefault();

  // 创建FormData，默认会包含禁用字段以外的内容，所以手动添加禁用字段的值
  const formData = new FormData(form);
  const disabledFields = [
    document.getElementsByName("x")[0],
    // 其他禁用字段
  ];
  disabledFields.forEach(field => {
    formData.append(field.name, field.value);
  });

  // 发送请求，保持和原表单一致的提交方式和地址
  fetch(form.action, {
    method: form.method,
    body: formData,
    credentials: "include" // 如果需要携带Cookie的话加上
  }).then(response => {
    // 处理提交后的逻辑，比如跳转页面
    if (response.ok && response.redirected) {
      window.location.href = response.url;
    }
  }).catch(err => {
    console.error("表单提交失败:", err);
  });
});

方法3：用隐藏字段同步值 #

提前把禁用字段的值同步到对应的隐藏字段，提交时直接发送隐藏字段的数据，完全不需要切换字段的禁用状态：

<!-- 表单中添加隐藏字段，name和原禁用字段一致 -->
<input type="hidden" name="x" id="hidden-x">
<!-- 原禁用字段修改name，避免提交冲突 -->
<select name="x_display" disabled>
  <!-- 选项内容 -->
</select>

// 初始化时同步值
const disabledSelect = document.querySelector('select[name="x_display"]');
const hiddenInput = document.getElementById("hidden-x");
hiddenInput.value = disabledSelect.value;

// 如果后续有更新禁用字段值的场景，同步更新隐藏字段即可
// 提交时无需额外处理，表单会自动发送隐藏字段的数据

内容的提问来源于stack exchange，提问作者the red herring