表单提交后sweetAlert弹窗一闪而过 如何实现页面重载后显示sweetAlert

核心问题原因 #

1. 事件绑定错误：onsubmit是<form>标签的专属事件，绑定在提交按钮上不会触发
2. 未阻止表单默认提交逻辑：校验通过后浏览器会立即跳转/刷新页面，弹窗刚渲染就被销毁
3. 页面刷新/跳转后原JS上下文全部清空，直接在提交逻辑里写弹窗代码无法在新页面生效

改造步骤 #

步骤1：调整DOM绑定 #

移除按钮上的onsubmit属性，将提交校验事件绑定到<form>标签上，示例：

<!-- 给form标签加onsubmit事件，return返回值控制是否允许提交 -->
<form id="loginForm" action="你的表单提交地址" method="post" onsubmit="return confirm_login()">
  <!-- 其余表单内容保持不变 -->
  <button class="flex-c-m size27 btn effect02 s-text33 trans-0-4" type="submit">
    <i class="fas fa-unlock-alt p-r-5"></i> 
  </button>
</form>

步骤2：修改提交校验逻辑 #

校验通过后往sessionStorage写入登录成功的临时标记，再允许表单提交跳转：

function confirm_login() {
  const email = document.getElementById('customer_email').value.trim()
  const password = document.getElementById('customer_password').value.trim()
  if (!email || !password) {
    toastr["error"]("Veuillez d'abord remplir tous les champs !");
    // 返回false阻止表单提交
    return false
  }
  // 写入临时标记，sessionStorage仅当前会话有效，关闭浏览器自动清除
  sessionStorage.setItem('login_success', 'true')
  // 返回true允许表单正常提交跳转
  return true
}

步骤3：新增页面加载判断逻辑 #

在跳转目标页（客户账户页）的JS中加入加载监听，读取到登录成功标记后触发弹窗，用完立即删除标记避免重复弹窗：

window.addEventListener('load', function() {
  if (sessionStorage.getItem('login_success') === 'true') {
    swal({
      icon: 'success', 
      title: "Message!",
      text: "Message 2",
      type: "success"
    })
    // 清除标记，防止后续刷新重复弹出
    sessionStorage.removeItem('login_success')
  }
})

补充说明 #

如果你的表单是异步提交（无刷新提交），不需要跳转页面的话，可以直接阻止表单默认提交，在异步请求成功的回调里触发swal即可，不需要用到存储标记。

内容的提问来源于stack exchange，提问作者Derick T.