JavaScript中的甜蜜警报消息瞬间显示

问题描述

当用户按下确认按钮时, 我需要使用javascript检查一些事情,并且在一定条件下需要显示甜蜜的警报 其中,一旦用户按OK(在Sweetalert消息中),它将重定向到另一个页面。 但是警报显示的只是一瞬间,并且没有重定向到页面(因为我没有按“确定”)。 通过视图中按钮的onClick调用javascript:

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

这是视图中的javascript:

@section Scripts{
    <partial name="_ValidationScriptsPartial" />
    <script src="https://cdn.tiny.cloud/1/h0b6kdvecrt66vsb30f5tpqd7ocxoezkzq6fcfbbvp0xrbfw/tinymce/5/tinymce.min.js"></script>
    <script type="text/javascript">
        function ApprovePayment() {
            var val = document.getElementById("PaymentHistory_SentFromAddressId");
            var selectedText = val.options[val.selectedIndex].text;
            var amount = document.getElementById("PaymentHistory_Amount");
            var value = parseFloat(amount.value);
            var max = parseFloat(amount.getAttribute("data-val-range-max"));
            var min = parseFloat(amount.getAttribute("data-val-range-min"));
            if (!(value < min || value > max)) {
                window.alert("amount validated");
                if (selectedText.includes("- Paypal")) {
                    window.alert("in paypal")
                }
                else {
                       swal("Success!","Payment Added To Your List,Admin will Approve once Payment Received!","success")
                            .then((value) => {window.location.href = '/UserRole/PaymentHistory'; });
                }
            }
        }
    </script>
}

解决方法

onclick列表器是在“提交”按钮上定义的,当您单击“提交”按钮时,浏览器将执行默认操作,即表单提交。

为防止这种情况,可以使用两种方法。

  1. 在onsubmit表单上添加侦听器。
  2. 防止浏览器默认操作。
  3. 将按钮类型从“提交”更改为“按钮”。

第二种方法的示例。

@section Scripts{
    <partial name="_ValidationScriptsPartial" />
    <script src="https://cdn.tiny.cloud/1/h0b6kdvecrt66vsb30f5tpqd7ocxoezkzq6fcfbbvp0xrbfw/tinymce/5/tinymce.min.js"></script>
    <script type="text/javascript">
        function ApprovePayment(event) {
            event.preventDefault(); // stop the default action
            var val = document.getElementById("PaymentHistory_SentFromAddressId");
            var selectedText = val.options[val.selectedIndex].text;
            var amount = document.getElementById("PaymentHistory_Amount");
            var value = parseFloat(amount.value);
            var max = parseFloat(amount.getAttribute("data-val-range-max"));
            var min = parseFloat(amount.getAttribute("data-val-range-min"));
            if (!(value < min || value > max)) {
                window.alert("amount validated");
                if (selectedText.includes("- Paypal")) {
                    window.alert("in paypal")
                }
                else {
                       swal("Success!","Payment Added To Your List,Admin will Approve once Payment Received!","success")
                            .then((value) => {window.location.href = '/UserRole/PaymentHistory'; });
                }
            }
        }
    </script>
}

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...