logo标签列表

删除前进行Sweet Alert确认

javascriptphpjquerysweetalert
3

你好，我是一个使用 sweet alert js 来使我的警告框更加美观的新手。我正在使用普通的 JavaScript 警告确认来删除我的表中特定的数据。然而，当我尝试在删除之前运行 sweet alert 确认时，它在弹出确认窗口之前就删除了文件。

以下是我的 JS 代码：

<script>
    archiveFunction() {
        swal({
  title: "Are you sure?",
  text: "But you will still be able to retrieve this file.",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, archive it!",
  cancelButtonText: "No, cancel please!",
  closeOnConfirm: false,
  closeOnCancel: false
},
function(isConfirm){
  if (isConfirm) {
    swal("Deleted!", "Your imaginary file has been archived.", "success");
  } else {
    swal("Cancelled", "Your imaginary file is safe :)", "error");
  }
});
    }
</script>

以下是我的HTML表单。

这是我下面的HTML表单。

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
        <input type="hidden" name="p_id" id="p_id" value="<?php echo $rows['p_id']; ?>">
        <button class="btn btn-danger" type="submit" name="archive" onclick="archiveFunction()">
            <i class="fa fa-archive"></i>
                Archive
        </button>
</form>

以下是PHP代码的示例。

<?php

include('../config.php');

if(isset($_POST['archive']))
{
$p_id = $_REQUEST['p_id'];
// sql to delete a record
$sqli = "UPDATE students SET archive = 2 WHERE p_id=$p_id";

if ($conn->query($sqli) === TRUE) {
    echo "swal('Archived!', 'Click ok to see!', 'success')";
} else {
    echo "Error Archiving record: " . $conn->error;
}

$conn->close(); 
}
?>

我希望在删除特定数据之前，能够确认sweet alert确认框中的信息。

5个回答
11

正如其他人提到的那样，您的按钮单击会将表单提交到指定的操作，您无法在警报框中选择选项。因此，您应该使用event.preventDefault()防止表单提交，并仅在用户按下“是”时才提交表单。

function archiveFunction() {
event.preventDefault(); // prevent form submit
var form = event.target.form; // storing the form
        swal({
  title: "Are you sure?",
  text: "But you will still be able to retrieve this file.",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, archive it!",
  cancelButtonText: "No, cancel please!",
  closeOnConfirm: false,
  closeOnCancel: false
},
function(isConfirm){
  if (isConfirm) {
    form.submit();          // submitting the form when user press yes
  } else {
    swal("Cancelled", "Your imaginary file is safe :)", "error");
  }
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<form action="abc" method="POST">
        <input type="hidden" name="p_id" id="p_id" value="<?php echo $rows['p_id']; ?>">
        <button class="btn btn-danger" name="archive" type="submit" onclick="archiveFunction()">
            <i class="fa fa-archive"></i>
                Archive
        </button>
</form>

我试过了。顺便问一句，abc是什么操作？如果我点击是，没有任何反应。 - Jaaayz
abc 只是一个虚拟操作。请用您的操作替换它。在这个例子中，当按下“是”时，它将路由到 abc，并且我们将得到一个 404 错误，因为 abc 只是一个虚拟 URL。 - Ankit Chaudhary
我尝试更改它，但仍无法提交。如果您有时间，我们可以在聊天室继续讨论吗？ - Jaaayz
当然，我们可以进行讨论。 - Ankit Chaudhary
抱歉，我的连接速度很慢，可能要到星期四才能回复。顺便说一下，我在同一页中使用了isset post来创建表单进行存档。我没有使用任何操作，只是使用了PHP服务器本身。如何在不在表单中执行操作的情况下实现这一点？ - Jaaayz
显示剩余3条评论
2

这是在Express JS中使用Sweet Alerts进行删除确认的代码：

我的代码：

function validateForm() {
      event.preventDefault(); // prevent form submit
      var form = document.forms["myForm"]; // storing the form
      swal({
             title: "Are you sure?",
             text: "Once deleted, you will not be able to recover this imaginary file!",
             icon: "warning",
             buttons: true,
             dangerMode: true,
           })
          .then((willDelete) => {
               if (willDelete) {
                     form.submit();
               } else {
                      swal("Your imaginary file is safe!");
           }
        });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<form name="myForm"  method="POST" action="/delete">
      <input type="hidden" value="<%= alldata[i]._id %>" name="std_id"> 
      <input type="submit" onclick="validateForm()" class="btn btn-danger btn-xs" value="DELETE">
</form>

1
这是因为您没有使用 event.preventDefault() 或者 return 并相应地使用 false 或 true 来防止浏览器的默认行为。
function [...](e) {
    e.preventDefault();
    [...]
}

改变，

<button class="btn btn-danger" type="submit" name="archive" onclick="archiveFunction()">

致，

<button class="btn btn-danger" type="submit" name="archive" onclick="archiveFunction(event)">

为了内联事件监听器传递事件参数。
或者，如果不需要表单，则可以删除表单标签。
0

function archiveFunction() {
event.preventDefault(); // prevent form submit
var form = event.target.form; // storing the form
        swal({
  title: "Are you sure?",
  text: "But you will still be able to retrieve this file.",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, archive it!",
  cancelButtonText: "No, cancel please!",
  closeOnConfirm: false,
  closeOnCancel: false
},
function(isConfirm){
  if (isConfirm) {
    form.submit();          // submitting the form when user press yes
  } else {
    swal("Cancelled", "Your imaginary file is safe :)", "error");
  }
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<form action="abc" method="POST">
        <input type="hidden" name="p_id" id="p_id" value="<?php echo $rows['p_id']; ?>">
        <button class="btn btn-danger" name="archive" type="submit" onclick="archiveFunction()">
            <i class="fa fa-archive"></i>
                Archive
        </button>
</form>

0

删除 <form> 并替换为：

<button class="btn btn-danger" type="submit">

至：

<button class="btn btn-danger ajax_delete" type="button">

通过 "ajax_delete" 调用 onclick 函数

$(".ajax_delete").on("click", function (){ /*your sweet alert code and after ajax call function */});

然后将您的删除代码放入ajax调用文件中。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接