How to fix the sweetalert2 confirm dialog not working properly in onclick event button?

I have a modal popup, for CRUD operations before submitting sweetalert2 confirm dialog is triggered.

Here is my modal form code:

<form id="EditForm" asp-action="Edit">
<div class="modal-body">
    
    /*input codes here*/
</div>
<div class="modal-footer justify-content-between">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-success btn-flat" onclick="return submitResult()"><i class="far fa-check-circle"></i> Save Changes</button>
</div>

And here is js code:

function submitResult() {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire(
                    'Deleted!',
                    'Your file has been deleted.',
                    'success'
                )
                return true;
            }
            else {
                return false;
            }
        })
    }

Sample output

Apply edit, it still does not work

How to fix the sweetalert2 confirm dialog not working properly in onclick event button?

I have a modal popup, for CRUD operations before submitting sweetalert2 confirm dialog is triggered.

Here is my modal form code:

<form id="EditForm" asp-action="Edit">
<div class="modal-body">
    
    /*input codes here*/
</div>
<div class="modal-footer justify-content-between">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-success btn-flat" onclick="return submitResult()"><i class="far fa-check-circle"></i> Save Changes</button>
</div>

And here is js code:

function submitResult() {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire(
                    'Deleted!',
                    'Your file has been deleted.',
                    'success'
                )
                return true;
            }
            else {
                return false;
            }
        })
    }

Sample output

Apply edit, it still does not work

• javascript
• modal-dialog
• form-submit
• sweetalert2

• 2 Your code is fine. Looks like the page is refreshing because the button click is being treated as a form submission. You'll need to delay form submission until SWAL is plete or disconnect the button from the form. – HymnZzy Commented Nov 17, 2020 at 6:32
• I think, HymmZyy is right. Just add this code to your submit. e.preventDefault(); – Ultimate Commented Nov 17, 2020 at 6:43

1 Answer 1

Try this

<button type="submit" class="btn btn-success btn-flat" onclick="submitResult(event)"><i class="far fa-check-circle"></i> Save Changes</button>

....

function submitResult(e) {
    e.preventDefault();
    Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire(
                'Deleted!',
                'Your file has been deleted.',
                'success'
            )
            document.getElementById("EditForm").submit();
        }
    })
}