如何实现提交表单后页面重载弹出SweetAlert成功提示

你现在把弹窗绑定在提交按钮的点击事件上，表单触发提交后会立刻引发页面重载，弹窗刚触发就被刷新流程清掉，用户根本看不到提示。

要等页面重载完成再弹提示，核心是别把弹窗挂在按钮点击事件上，改成在页面加载完成后，判断当前页面是不是“刚提交完表单跳转过来的”，满足条件再弹。

具体操作步骤 #

• 删掉提交按钮上的onclick="meronSuccess()"绑定，避免弹窗被刷新打断
• 提交表单触发页面跳转时，加个能识别“刚提交”状态的标记，两种常用方法选一个就行：
  • 提交成功后的跳转地址加个查询参数，比如跳到目标页时URL带上?registered=1
  • 提交触发页面前，往sessionStorage存个临时标记：sessionStorage.setItem('registered', '1')
• 页面完全加载后，先读这个标记，符合条件就弹成功提示，弹完立刻把标记清掉，防止后面手动刷新页面重复弹提示

修正后的代码 #

// 等页面所有资源加载完再执行判断
window.addEventListener('load', () => {
  // 用URL参数判断的写法
  const search = new URLSearchParams(location.search)
  const isPostSuccess = search.get('registered') === '1'

  // 用sessionStorage判断的写法（和上面的URL方案二选一）
  // const isPostSuccess = sessionStorage.getItem('registered') === '1'
  // sessionStorage.removeItem('registered')

  if (isPostSuccess) {
    Swal.fire({
      position: 'center',
      icon: 'success',
      title: 'Registered!',
      showConfirmButton: false,
      timer: 1000
    })
  }
})

<!-- 移除了onclick绑定的提交按钮 -->
<button type="submit" class="btn btn-success btn-danger text-bold float-right" id="meron" value="submit">Submit</button>

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