SweetAlert2确认框与表单搭配不生效，点击复选框无法弹出如何解决？

问题根源 #

原生DOM的form.submit()方法不会触发绑定的onsubmit事件监听器，你在复选框onchange中直接调用原生提交方法，导致你写的确认逻辑完全没有执行，因此没有弹框也没有报错。

解决方案 #

方案1：保留原有onsubmit逻辑，修改复选框触发方式 #

将复选框的onchange属性修改为主动触发submit事件，即可让绑定的onsubmit回调正常执行：

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

如果你使用的是新版SweetAlert2，原有回调写法已经废弃，需要替换为Promise写法，修改后的JS代码如下：

document.querySelector('#from1').onsubmit = function(e){
    const flag = $(this).attr('data-flag');
    if(flag == 0){
        e.preventDefault();
        Swal.fire({
            title: "Are you sure?",
            text: "You are about to create a transaction",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: '#DD6B55',
            confirmButtonText: 'Yes, I am sure!',
            cancelButtonText: "No, cancel it!"
        }).then((result) => {
            if (result.isConfirmed){
                Swal.fire("Shortlisted!", "Transaction successfully created", "success");
                $('#from1').attr('data-flag', '1');
                $('#from1').submit();
            } else {
                Swal.fire("Cancelled", "Transaction didn't submitted", "error");
                // 取消后还原复选框状态
                this.querySelector('input[name="wallet_checked"]').checked = !this.querySelector('input[name="wallet_checked"]').checked;
            }
        });
    }
    return true;
};

方案2：直接绑定复选框change事件（更简单） #

不用依赖表单submit事件，直接把确认逻辑绑定到复选框的change事件上，代码更简洁：

<form id="from1" action="" method="POST">
    @csrf
    <input type="checkbox" name="wallet_checked" id="wallet_checked">
</form>

$('#wallet_checked').on('change', function(){
    const $form = $('#from1');
    Swal.fire({
        title: "Are you sure?",
        text: "You are about to create a transaction",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: '#DD6B55',
        confirmButtonText: 'Yes, I am sure!',
        cancelButtonText: "No, cancel it!"
    }).then((result) => {
        if (result.isConfirmed){
            Swal.fire("Shortlisted!", "Transaction successfully created", "success");
            $form.submit();
        } else {
            Swal.fire("Cancelled", "Transaction didn't submitted", "error");
            // 还原复选框状态
            $(this).prop('checked', !$(this).prop('checked'));
        }
    });
});

内容的提问来源于stack exchange，提问作者user16723850