Question

我想在使用SweetAlert 2确认框提交表单之前添加最终检查。

表单按钮是提交类型，我处于阻止默认但不会从确认框提交的阶段：

更新

$('#btn-submit').on('click', function(e){
    e.preventDefault();
  swal({   
    title: "Are you sure?",
    text: "You will not be able to recover this lorem ipsum!",         type: "warning",   
    showCancelButton: true,   
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!", 
    closeOnConfirm: false 
  }, 
    function(){   
    $("#form-loader").submit();
  });
})

我现在面临的问题是删除按钮只是关闭警报并在没有提交的情况下恢复到上一个屏幕

<form method="POST" action="#" accept-charset="UTF-8" id="form-loader"><input name="_method" type="hidden" value="DELETE">
<input name="_token" type="hidden" value="Yl8jdQ8dzxPmbxMcdF7coS9bSxXsChXU2g1YHEq0">
<input class="delete-confirm" id="btn-submit" type="submit" value="Delete">
</form>

Answer 1

您忘记将event参数传递给回调：

$('.delete-confirm').on('click', (event) => {
//                                ^^^^^

Answer 2

表单按钮是提交类型，我处于阻止默认但不会从确认框提交的阶段：

根据SweetAlert2 documentation，您可以测试用户是否点击了确认按钮：

.then((result) => {
    if (result.value) { // if confirm clicked....
       $('.delete-confirm').closest('form').submit(); // submit form
    }
})

$('.delete-confirm').on('click', (event) => {
    event.preventDefault()
    swal({
        title: 'Confirm',
        text: 'Are you sure to delete this instance?',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Delete',
        cancelButtonText: 'Cancel'
    }).then((result) => {
        if (result.value) {
            $('.delete-confirm').closest('form').submit();
        }
    });
});

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert2@7.1.3/dist/sweetalert2.all.js"></script>


<form>
    <table>
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th></th>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td><input type="submit" class="delete-confirm" value="delete?"></td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td><input type="submit" class="delete-confirm" value="delete?"></td>
        </tr>
        <tr>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td><input type="submit" class="delete-confirm" value="delete?"></td>
        </tr>
    </table>
</form>

使用甜蜜警报防止表单提交上的默认值

2 个答案: