如何实现HTML表单提交成功后弹出模态提示框

原生submit事件的触发时机早于浏览器实际发送表单请求的节点：事件回调执行完成后，浏览器才会启动表单提交、后续跳转/重载流程，因此直接在回调里弹alert必然会提前触发。
同时原生表单默认提交走页面导航逻辑，提交完成后触发整页重载，原有页面的JS上下文会被完全销毁，根本没有执行成功提示的时机；即使配置_next重定向回当前页，本质还是整页刷新，无法跨页面重载传递提交状态。

拦截表单的默认提交行为，改用异步请求发送表单数据，整个提交过程不会触发页面跳转/重载，可以精准控制请求成功、失败的回调逻辑，不需要单独制作致谢页面。

完整代码 #

表单部分保留原有结构即可：

<form action="https://formsubmit.co/你的接收邮箱" method="POST" class="form">
  <input type="text" name="name" required placeholder="姓名">
  <input type="email" name="email" required placeholder="邮箱">
  <!-- 保留禁用验证码的配置即可，不需要再配置_next跳转参数 -->
  <input type="hidden" name="_captcha" value="false">
  <button type="submit">提交</button>
</form>

对应JS逻辑：

const form = document.querySelector('.form');

form.addEventListener('submit', async (e) => {
  // 阻止表单默认的跳转提交行为
  e.preventDefault();
  // 自动收集表单内所有输入数据
  const formData = new FormData(form);

  try {
    // 异步发送提交请求
    const response = await fetch(form.action, {
      method: 'POST',
      body: formData,
      headers: {
        'Accept': 'application/json'
      }
    });

    if (response.ok) {
      // 提交成功后触发提示，时机完全匹配提交结果，不会提前弹出
      alert('提交成功，我们已收到你的信息。');
      // 这里替换成自定义模态框的唤起代码即可
      form.reset(); // 提交成功后清空表单输入
    } else {
      alert('提交失败，请稍后重试。');
    }
  } catch (error) {
    alert('网络异常，请检查网络连接后重试。');
  }
});

注意事项 #

• 这套方案全程不会触发页面跳转或重载，用户提交后始终停留在当前页，交互流畅度比重定向方案更好
• 异步提交场景下_next参数不生效，可以直接删掉该隐藏域
• 不需要额外引入第三方依赖，原生JS即可实现所有逻辑

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