我嘗試對 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");
      }
    });
}

干杯，席蒙