甜蜜警报确认框似乎不适用于表单

Question

我正在使用SweetAlert2 向用户显示一个确认框，如果他选中了这样的表单上的复选框：

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

如您所见，我已将onchange="this.form.submit();" 用于复选框，以便在不使用提交按钮的情况下提交表单，它工作正常。

然后为了显示 Sweet Alert 确认消息，我添加了以下内容：

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

但问题是，当我点击复选框时它不会弹出。

在控制台上，没有出现错误。

那么当用户选中复选框时如何正确显示此确认消息？

Answer 1

首先您说您正在使用 sweetalert2，但您为 alert 编写的代码是为 sweetalert 而不是为 sweetalert2。两者的语法不同。

试试这个代码，这应该可以工作：

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