jquery - 使用甜蜜警报防止表单提交时出现默认情况

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

The form button is type submit, I am at a stage where I have prevented the default but it will not submit from the confirmation box:

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