单击“取消”按钮后，Sweetalert 仍提交表单

Question

我有一个使用 sweetalert.js.

的 Laravel 5.8 项目

我有一个这样的表格：

<form id="myForm" action="{{ route('acceptWallet') }}" method="POST">
   @csrf
   <input type="checkbox" id="btn-submit" name="wallet_checked" onchange="this.form.submit();">
</form> 

如您所见，我使用了

onchange="this.form.submit();"

来提交表单，而没有使用提交按钮，并且效果很好。

然后通过使用此脚本，我尝试显示 SweetAlert 确认消息框，其中包含 Yes 和 No 作为按钮：

$(document).on('click', '#btn-submit', function(e) {
    e.preventDefault();
    let form = $(this).parents('form');
    swal(
        {
        title: "Attention!",
        text: "Are you sure you want to make this transaction",
        type: "warning",
        allowEscapeKey: false,
        allowOutsideClick: false,
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes",
        cancelButtonText: "No",
        showLoaderOnConfirm: true,
        closeOnConfirm: false
    }).then((isConfirm) => {
        if (isConfirm) {
            document.getElementById("myForm").submit();
            return true;
        }
        return false;
    });
});

现在它工作正常，但唯一的问题是，当我单击No按钮（即CancelButton）时，它仍然提交表单并调用操作。

所以问题是，当用户按下

No

按钮时，如何拒绝 submit()？

Answer 1

将代码更改为：

$(document).on('click', '#btn-submit', function(e) {
    e.preventDefault();
    let form = $(this).parents('form');
    swal(
        {
        title: "Attention!",
        text: "Are you sure you want to make this transaction",
        type: "warning",
        allowEscapeKey: false,
        allowOutsideClick: false,
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes",
        cancelButtonText: "No",
        showLoaderOnConfirm: true,
        closeOnConfirm: false
    }).then((isConfirm) => {
        if (isConfirm === true) {
            document.getElementById("myForm").submit();
        }
    });
});

Answer 2

试试这个代码：

$(document).on('click', '#btn-submit', function(e) {
    e.preventDefault();
    let form = $(this).parents('form');
    swal(
        {
        title: "Attention!",
        text: "Are you sure you want to make this transaction",
        type: "warning",
        buttons: {
            cancel: 'No',
            defeat: {
                text: 'Yes',
                value: true
            }
        },
        closeOnConfirm: false
    }).then((isConfirm) => {
        if (isConfirm === true) {
            document.getElementById("myForm").submit();
        }
    });
});

Answer 3

首先，您需要在要使用 SweetAlert 触发的表单上设置标志：

<form id="myForm" action="{{ route('acceptWallet') }}" method="POST" data-flag="0">
    @csrf
    <input type="checkbox" id="btn-submit" name="wallet_checked">
    <input type="submit" value="Submit">
</form>

然后你用JS触发它：

const form = $('#myForm');
form.submit(function(e) {
    if (form.attr('data-flag') == 0) {
        e.preventDefault();
        Swal.fire({
            title: 'Attention!',
            text: 'Are you sure want to make this transaction',
            icon: 'warning',
            confirmButtonText: 'Yes',
            cancelButtonText: 'No',
            showCancelButton: true
        }).then((res) => {
            if(res.isConfirmed) {
                form.attr('data-flag', '1');
                form.submit();
            }
        });
    }
});

如果您点击否

，将会阻止提交表单

Answer 4

这样做。

复制此代码

     <form class="sldier-form" action="{{ route('sliders.destroy', $slider->id) }}"  method="post">
      @csrf
      @method('DELETE')

      <button type="button" class="btn btn-danger btn-sm "  onclick="sliderDelete()">delete</button>
      </form>

// jquery 脚本

    <script>
    function sliderDelete() {

        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            customClass: {
                confirmButton: 'btn btn-success',
                cancelButton: 'btn btn-danger'
            },
            buttonsStyling: false,
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            
            if (result.value == true) {
                
                $('.sldier-form').submit();
                Swal.fire(
                    'Deleted!',
                    'Your file has been deleted.',
                    'success'

                )
            }
        })
    }
</script>

Answer 5

与 ASPNet MVC 一起使用：-

     Swal.fire({
                    title: 'Title of the sweetalert ?',
                    text: 'I'm using SweetAlert 2',
                    icon: 'info',
                    confirmButtonColor: '#3085d6',
                    showCancelButton: true,
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes',
                    cancelButtonText: 'No'
                }).then((isConfirm) => {
                    console.log(isConfirm);
                    if (isConfirm.isConfirmed === true) {
                    //Logic in case the user hits Yes button 
    }
});