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

Question

I'm trying to implement Sweet Alert to Node.js delete form, but unfortunately the alert doesn't work properly. It only pops up for a second and without clicking on delete button on the alert window, it deletes file from DB.

Here is my code:

<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>

Coul you please assist?

Many thanks in advance, Szymon

Answer 1

You have two problems.

1. When the submit button is clicked, you want to display the alert, but you don't want the form to submit. You've done nothing to prevent the form from submitting.
2. When the alert has the OK button clicked, you want to submit the form, but you are reloading the current page instead.

So, sort out the submit button first.

Don't use the onsubmit attribute. It is more trouble than it is worth.

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

Then make the alert do what you want when the OK button is selected.

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

Answer 2

I finally found a bug in above code and now it is working perfectly in EJS file. There should be:

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");
      }
    });
}

Cheers, Szymon