Sweet Alert confirmation before delete

Question

Hi I am new in using sweet alert js to make my alert box more fancy. I am using the normal javascript alert confirmation to delete a specific data in my table. However when I try to run a sweet alert confirmation before deleting it deletes the file without the confirmation popping up.

Here is the code in my JS below.

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

this is my html form below.

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

and here is the code in 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(); 
}
?>

what I want to happen is to confirm the sweet alert confirmation before deleting the specific data.

Solution 1

As other mentioned, your button click is submitting the form to the specified action and you are not able to chose your option in the alert. So you should prevent the form submit by using event.preventDefault() and submitting the form only when user press yes.

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>

Solution 2

This delete confirmation code with sweet alerts in express js

My code:

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>

Solution 3

This is happening because you're not preventing the default behaviour of the browser by using event.preventDefault() or return with either false or true accordingly.

function [...](e) {
    e.preventDefault();
    [...]
}

Change,

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

to,

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

to pass the event argument for inline event listeners.

Alternatively if the form is not required then you can just remove the form tags.