删除带有甜蜜警报的确认2

Question

我想用php删除一个DB记录。在我提交表格之前，我想要通知Sweet Alert（2），并带有“是或否”按钮。

当“是”我想提交表单并激活我的PHP代码。

问题是它不起作用。单击“是”后，我的页面刷新，我的PHP代码无法启动。

<form action="" method="POST">
    <div class="right gap-items-2">
        <button class="btn btn-error" name="archive" type="submit" onclick="archiveFunction()">archive</button>
    </div>
</form>


<script>
    function archiveFunction() {
        event.preventDefault(); // prevent form submit
        var form = event.target.form; // storing the form
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.value) {
                form.submit();
            }
        })
    }
</script>


if (isset($_POST['archive'])){

$message = "test";
echo "<script type='text/javascript'>alert('$message');</script>";

}

Answer 1

使用如下ID修改表单按钮：

<form action="" method="POST">
    <div class="right gap-items-2">
        <button class="btn btn-error" name="archive" type="submit" id="submitForm" >archive</button>
    </div>
</form>

然后像这样的脚本：

<script>
    $('#submitForm').on('click',function(e){
        e.preventDefault();
        var form = $(this).parents('form');
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.value) {

                form.submit();
            }
        });
    });
</script>