JavaScript中Sweet Alert弹窗闪显且点击确认后未跳转问题排查

这个问题我太熟悉了！核心原因是你的按钮是type="submit"，点击后会触发表单的默认提交行为，直接刷新页面——这就导致SweetAlert弹窗刚弹出来就被页面刷新冲没了，自然等不到你点击确定就执行不了跳转逻辑。

下面是两种针对性的解决办法，你可以根据自己的需求选一种：

方法1：修改按钮类型为非提交按钮 #

直接把按钮的type从submit改成button，这样点击按钮就只会触发你的ApprovePayment()函数，不会触发表单提交：

<div class="col"> 
  <button type="button" class="btn btn-primary form-control" onclick="ApprovePayment()">Create</button> 
</div>

你的JavaScript代码可以保持不变，不过可以优化下变量声明（用const/let代替var，更符合现代JS规范）：

function ApprovePayment() {
  const val = document.getElementById("PaymentHistory_SentFromAddressId");
  const selectedText = val.options[val.selectedIndex].text;
  const amount = document.getElementById("PaymentHistory_Amount");
  const value = parseFloat(amount.value);
  const max = parseFloat(amount.getAttribute("data-val-range-max"));
  const min = parseFloat(amount.getAttribute("data-val-range-min"));

  if (!(value < min || value > max)) {
    if (selectedText.includes("- Paypal")) {
      window.alert("in paypal")
    } else {
      swal("Success!", "Payment Added To Your List, Admin will Approve once Payment Received!", "success")
        .then((confirmed) => {
          // 确保用户点击确定后再跳转
          if (confirmed) {
            window.location.href = '/UserRole/PaymentHistory';
          }
        });
    }
  }
}

方法2：在函数中阻止表单默认提交行为 #

如果需要保留按钮的submit类型（比如还要用到表单的默认校验），可以在函数里接收事件参数，手动阻止默认提交行为：

function ApprovePayment(event) {
  // 关键：阻止表单的默认提交刷新行为
  event.preventDefault();
  
  const val = document.getElementById("PaymentHistory_SentFromAddressId");
  const selectedText = val.options[val.selectedIndex].text;
  const amount = document.getElementById("PaymentHistory_Amount");
  const value = parseFloat(amount.value);
  const max = parseFloat(amount.getAttribute("data-val-range-max"));
  const min = parseFloat(amount.getAttribute("data-val-range-min"));

  if (!(value < min || value > max)) {
    if (selectedText.includes("- Paypal")) {
      window.alert("in paypal")
    } else {
      swal("Success!", "Payment Added To Your List, Admin will Approve once Payment Received!", "success")
        .then((confirmed) => {
          if (confirmed) {
            window.location.href = '/UserRole/PaymentHistory';
          }
        });
    }
  }
}

注意：如果之后需要手动提交表单（比如校验通过后要提交数据），可以在合适的位置添加document.querySelector('form').submit();来触发提交。

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