我尝试对 Node.js 删除表单实施 Sweet Alert

Question

我正在尝试对 Node.js 删除表单实施 Sweet Alert，但不幸的是警报无法正常工作。 它只弹出一秒钟，没有点击警报窗口上的删除按钮，它会从数据库中删除文件。

这是我的代码：

<form action="/comicbooks/<%= comicbook._id %>/?_method=DELETE" 
  method="POST" class="deleteForm" onsubmit='swal({
  title: "Are you sure?",
 text: "Your will not be able to recover this imaginary file!",
 type: "warning",
 showCancelButton: true,
 confirmButtonClass: "btn-danger",
 confirmButtonText: "Yes, delete it!",
 closeOnConfirm: false,
 showLoaderOnConfirm: true,
 },
function (isConfirm) {
 location.reload();
});'>  
<button class="btn btn-xs btn-danger">Delete</button>
</form>

你能帮忙吗？

非常感谢， Szymon

Answer 1

你有两个问题。

1. 单击提交按钮时，您希望显示警报，但不希望表单提交。 您没有采取任何措施来阻止表单提交。
2. 当警报单击确定按钮时，您想要提交表单，但您正在重新加载当前页面。

所以，先整理一下提交按钮。

不要使用onsubmit属性。 这比它的价值更麻烦。

document.querySelector("form").addEventListener("submit", function (event) {
    event.preventDefault(); // Stop normal form submitting
    // Then include your code for showing the alert
});

然后在选择“确定”按钮时使警报执行您想要的操作。

function (isConfirm) {
    document.querySelector("form").submit();
})

Answer 2

我终于在上面的代码中发现了一个错误，现在它在 EJS 文件中完美运行。 应该有：

function archiveFunction(event) {
  event.preventDefault(); // prevent form submit
  var form = event.target.form; // storing the form
  swal({
      title: "Are you sure you want to delete the comicbook?",
      text: "You will not be able to undo this action.",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Delete",
      cancelButtonText: "Cancel",
      closeOnConfirm: false,
      closeOnCancel: false
    },
    function (isConfirm) {
      if (isConfirm) {
      form.submit();          // submitting the form when user press yes
      } else {
        swal("Cancelled", "Your comicbook has not been deleted.", "error");
      }
    });
}

干杯，席蒙