sweet alert message in JavaScript is showing for a split second

Question

When user press confirm button, i need to check a few things using javascript and in a certain condition need to show sweet alert in which, once the user will press ok (in the sweetalert message) it will redirect to another page. but the alert is showing for a split second and not redirecting to the page(since i didnt press "ok"). javascript is called from onClick of a button in the view:

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

here is the javascript in the view :

@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>
}

Answer 1

The onclick listner is defined on the submit button, when you click on the submit button the browser will perform the default action which is the form submit.

To prevent this you can use two approaches.

1. Add the listener on the form onsubmit.
2. Prevent the browser default action.
3. Change the button type from submit to 'button'.

Example for the second method.

@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>
}