Sweet alert confirmation box does not seem to be working with form

Question

I'm working with SweetAlert2 to show a confirmation box to user, if he checks a checkbox on a form like this:

<form id="from1" data-flag="0" action="" method="POST">
    @csrf
    <input type="checkbox" name="wallet_checked" onchange="this.form.submit();">
</form>

As you can see I have used onchange="this.form.submit();" for checkbox in order to submit the form without using submit button and it works fine.

Then for showing Sweet Alert confirmation message, I added this:

      document.querySelector('#from1').onsubmit = function(e){
            $flag = $(this).attr('data-flag');
            if($flag==0){
                e.preventDefault(); //to prevent submitting
                swal({
                        title: "Are you sure?",
                        text: "You are about to create a transaction",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: '#DD6B55',
                        confirmButtonText: 'Yes, I am sure!',
                        cancelButtonText: "No, cancel it!",
                        closeOnConfirm: false,
                        closeOnCancel: false
                    },
                    function(isConfirm){
                        if (isConfirm){
                            swal("Shortlisted!", "Transaction successfully created", "success");
                            //update the data-flag to 1 (as true), to submit
                            $('#from1').attr('data-flag', '1');
                            $('#from1').submit();
                        } else {
                            swal("Cancelled", "Transaction didn't submitted", "error");
                        }
                    });
            }
            return true;
        };

But the problem is, it does not pop up when I click on the checkbox.

And on Console, no errors appears.

So how to properly show this confirm message when user checks the checkbox?

Answer 1

First of all you said you are working with sweetalert2, but the code that you write for alert is for sweetalert not for sweetalert2. the syntax is different for both.

Try this Code, this should work :

<form id="from1" data-flag="0" action="" method="POST">
@csrf
    <input type="checkbox" id="checkbox" name="wallet_checked">
    <label>checkbox</label>
</form>

<script>

    $(function(){
        $('#checkbox').on('change',function(){
            let flag = $('#from1').attr('data-flag');
            if(flag == 0){

                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#DD6B55',
                    confirmButtonText: 'Yes, I am sure!',
                    cancelButtonText: "No, cancel it!",
                    closeOnConfirm: false,
                    closeOnCancel: false
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire("Shortlisted!", "Transaction successfully created", "success");
                        // update the data-flag to 1 (as true), to submit
                        $('#from1').attr('data-flag', '1');
                        $('#from1').submit();
                    } else {
                        Swal.fire("Cancelled", "Transaction didn't submitted", "error");
                    }
                })
            }
        });
    });
        
</script>