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

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 did 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?