全局表单提交加加载遮罩时如何兼容部分表单的自定义确认需求

冲突根因 #

你之前的逻辑冲突是因为内联onsubmit的返回值不会阻止额外绑定的submit事件监听器执行，你在全局监听器里固定拦截默认行为后直接提交，完全忽略了确认操作的返回结果。

解决方案 #

仅需两步修改即可完全匹配你的所有需求：

1. 调整HTML表单写法

去掉内联onsubmit，改用自定义data-confirm属性存放确认提示文本，不需要确认的表单无需添加该属性：

<form method="post" action="<?=base_url('clients/' . $meeting->cid);?>" data-confirm="Are you sure?">
  <input type="hidden" name="delmeeting" value="<?=$meeting->id;?>">
  <input type="submit" value="Delete" class="button">
</form>

2. 修改全局JS逻辑

document.addEventListener('DOMContentLoaded', () => {
  const forms = document.querySelectorAll('form');
  forms.forEach(form => {
    form.addEventListener('submit', e => {
      e.preventDefault();
      // 校验是否需要确认
      const confirmTip = form.dataset.confirm;
      if (confirmTip && !confirm(confirmTip)) return;
      // 确认通过/无需确认，显示加载屏后提交
      document.getElementById('loading').classList.remove('hidden');
      form.submit();
    });
  });
});

这里把toggle替换为remove更稳妥，避免重复点击触发加载屏隐藏的问题。

方案匹配度验证 #

• 所有表单提交时都必须显示加载div：只要通过校验进入提交流程，都会触发加载屏显示
• 支持配置部分表单弹出确认窗：仅给需要确认的表单添加data-confirm属性即可，无属性的表单直接走提交流程
• 代码保持精简：仅新增2行校验逻辑，无额外依赖
• 确认弹窗支持自定义提示文本：data-confirm的属性值就是弹窗提示内容，可任意自定义

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