Bootstrap5无jQuery环境下如何实现表单POST提交后展示处理状态

之前的实现出现表单提交异常、字段丢失，核心原因是搞错了浏览器原生表单的提交流程节点：

浏览器原生POST表单的执行顺序为：捕获提交触发动作（按钮点击/回车提交） → 触发表单submit事件 → 执行所有绑定的事件回调 → 遍历收集所有未被禁用的控件值、序列化生成请求体 → 发起网络请求、跳转页面

• 如果在事件回调的同步代码里把输入框设为disabled，浏览器序列化阶段会直接跳过该控件，自然就会出现后端收不到name字段的问题
• CentOS7上的旧版Chrome对提交按钮状态敏感度很高，如果在按钮click事件里同步把提交按钮设为disabled，浏览器会判定提交动作被取消，直接中断整个提交流程，就出现了只显示加载态、完全不发请求的现象
• 之前尝试绑定onsubmit、按钮click事件出现的所有异常，本质都是在浏览器完成表单数据收集之前，就修改了控件的禁用状态，干扰了原生提交流程。

现有setTimeout临时方案的可靠性评估 #

目前用setTimeout(0)包裹禁用逻辑的实现，本质是把操作推到下一个事件循环，等浏览器完成表单序列化、发出请求后再执行禁用操作，在常规桌面环境下可以跑通，但并不是跨场景可靠的通用方案，存在几个明显缺陷：

• 时序不稳定：setTimeout的回调执行时机依赖浏览器事件循环调度，在CPU负载较高、设备性能较弱的场景下，回调可能延迟到页面跳转前才执行，根本起不到阻止重复提交的作用
• 覆盖不全：只绑定了按钮的click事件，无法覆盖用户在输入框按回车触发表单提交的场景
• 防护不足：只禁用了提交按钮，没有阻止用户修改输入框内容，在请求跳转的间隙，用户依然可以篡改表单值、甚至重复触发提交

兼容无jQuery、JS禁用场景的最优实现 #

核心设计原则是：所有UI加载态更新操作必须在不干扰表单数据序列化的前提下执行，不修改原生表单的提交逻辑，保证JS失效时表单可正常工作。
实现思路是用透明遮罩层代替直接修改输入框的禁用状态——遮罩层不会改动表单控件的属性，完全不会影响浏览器收集、序列化表单值，同时可以从交互层面阻止用户的所有重复操作。
具体代码调整如下：

1. HTML结构（在原有表单外增加相对定位容器，预留默认隐藏的加载遮罩层）：

<div class="position-relative" id="formWrap">
  <form action="" method="post" id="reqform">
    <div class="input-group">
      <div class="form-floating mb-3">
        <input class="form-control" id="nameInputId" placeholder="name" name="name" aria-describedby="basic-addon1" type="text">
        <label for="nameInputId">Name</label>
      </div>
    </div>
    <button type="submit" id="submitBtnId" class="btn btn-primary">Submit</button>
  </form>
  <!-- 默认隐藏的加载遮罩层 -->
  <div id="loadingMask" class="position-absolute top-0 start-0 w-100 h-100 d-none" style="background: rgba(255,255,255,0.85); z-index: 10;">
    <div class="d-flex justify-content-center align-items-center h-100">
      <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
      Processing your request...
    </div>
  </div>
</div>

2. 原生JS逻辑（无jQuery依赖）：

const reqForm = document.getElementById('reqform');
const loadingMask = document.getElementById('loadingMask');
const submitBtn = document.getElementById('submitBtnId');

// 绑定表单本身的submit事件，覆盖所有提交触发场景（按钮点击、回车提交）
reqForm.addEventListener('submit', function() {
  // 不修改任何输入框的disabled属性，完全不干扰表单数据序列化
  // 展示遮罩层，覆盖整个表单区域，拦截用户的所有点击、输入操作
  loadingMask.classList.remove('d-none');
  // 仅修改提交按钮状态，按钮本身不参与表单数据提交，不会造成字段丢失
  submitBtn.disabled = true;
  submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...';
});

方案优势 #

• 完全不干扰原生POST流程：所有操作都在submit事件触发、浏览器完成表单校验后执行，没有修改输入框的禁用状态，浏览器会完整收集所有输入字段的值，绝不会出现后端收不到数据的问题
• 兼容JS禁用场景：如果JS未生效，遮罩层会保持隐藏，按钮不会被修改，表单完全按照原生HTML逻辑正常提交
• 时序可靠：逻辑为同步执行，submit事件触发的瞬间就展示遮罩，不存在setTimeout的延迟调度问题，从根源上阻止用户重复提交
• 覆盖全场景：绑定表单的submit事件，不管是点击按钮还是回车触发提交，都能正常展示加载态

对比之前提到的“静态替换提交按钮为加载提示”的方案，遮罩方案不需要改动原有表单的静态结构，既能动态展示加载状态，也不会破坏JS失效时的原生表单功能，灵活度和可靠性更高。

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