Question

我有一个包含一些数据行的表格，每一行都有删除按钮。

如果我用我的代码实现sweetalert2，我的表单不会提交，我需要的是，我只需要在sweet alert确认按钮后删除我的行。这是我的代码；

<tbody>
<?php foreach ($category_details as $category_detail): ?>
<tr>
<td>...</td> <!-- etc -->
<form method="post">
<td>

<input type="hidden" name="delete-id" value="<?php echo $category_detail['id']; ?>">

<button type="submit" name="single-cdelete" class="swa-confirm btn btn-trash-alt">
<i class="fas fa-trash-alt"></i>
</button>

</td>
</tr>
<?php endforeach ?>
</tbody>
</form>

if(isset($_POST['single-cdelete'])){
    $delete_id    = $_POST['delete-id'];
    $delete_image = $_POST['delete-image'];
    category_delete($delete_id, $delete_image);
}

function category_delete($delete_id, $delete_image){
    
    global $db;

    if(mysqli_query($db, "DELETE FROM categories WHERE id =$delete_id")){
        unlink('../assets/images/categories/'.$delete_image);
        $_SESSION['success'] = "Category has been deleted successfully";
    }else{
        $_SESSION['success'] ="Something went wrong, Try again";
    }
}

我的 SweetAlert 代码：

<script>
$(".swa-confirm").on("click", function(e) {

        e.preventDefault(); 

        Swal.fire({
            title: "Are you Sure ?",
            text:"You want to Delete the selected Category",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#cc3f44",
            confirmButtonText: "Delete",
            closeOnConfirm: true,
            html: false
        }, function( confirmed ) {
            if( confirmed ){
                $('.swa-confirm').submit();
            }
        });

});
</script>

Answer 1

从您的代码中可以明显看出，您已经使用 jQuery 来执行表单提交。

根据文档 https://api.jquery.com/submit/，方法 .submit() 只能用于 form。

<块引用>

提交事件在用户尝试提交表单时发送到元素。它可以只附加到 <form> 元素..

可以通过单击明确的、、或或通过当某些表单元素具有焦点时按 Enter...

可以看出，您还依赖于其他一些功能 Swal.fire(..)，因此，您必须执行 event.preventDefault()，否则，表单会毫不费力地自行提交。但可以理解的是，您将需要这部分功能。

因此，要解决您的问题，您需要在表单中添加某种标识符，例如class 或 id。所以，不要这样做：

<form method="post">

..do，类似

<form method="post" id="myform">

..并在代码片段中，使用此标识符调用 submit()：

更新：另外，请注意 sweetalert2 支持 promise，因此建议使用 then-able承诺并使用 catch 块来跟踪任何错误。

$(".swa-confirm").on("click", function(e) {

  e.preventDefault();

  Swal.fire({
      ...
    }).then((confirmed) => {
      if (confirmed) {
        $('#myform').submit(); // << here
      }
    })
    .catch((error) => {
      console.log(error)
    });
});

Answer 2

作为来自 @Tangoabc Delta 的评论，您可以在表单上使用 .submit() 事件，因此：

首先，给你的表单一个id：
```
<form method="post" id="swaForm">
```

然后像这样使用脚本：

 <script>
      $(".swa-confirm").on("click", function(e) {

              e.preventDefault(); 

              Swal.fire({
                  title: "Are you Sure ?",
                  text:"You want to Delete the selected Category",
                  type: "warning",
                  showCancelButton: true,
                  confirmButtonColor: "#cc3f44",
                  confirmButtonText: "Delete",
                  closeOnConfirm: true,
                  html: false
              }).then(function() {
                     $('#swaForm').submit();
                  })
              });
      </script>

甜蜜警报确认后未提交表单

2 个答案: