Sweet Alert подтверждение перед удалением

Question

Привет, я новичок в использовании sweet alert js, чтобы сделать мое окно предупреждений более модным. Я использую обычное подтверждение предупреждения JavaScript, чтобы удалить определенные данные из моей таблицы. Однако, когда я пытаюсь запустить приятное подтверждение перед удалением, файл удаляется без подтверждения.

Вот код в моем 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-форма ниже.

<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(); 
}
?>

то, что я хочу, это подтвердить сладкое предупреждение перед удалением определенных данных.

Answer 1

Как уже упоминалось, при нажатии кнопки отправляется форма для указанного действия, и вы не можете выбрать свой вариант в предупреждении. Таким образом, вы должны предотвратить отправку формы с помощью 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>

Answer 2

Этот код подтверждения удаления со сладкими оповещениями в экспресс JS

Мой код:

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>

Answer 3

Это происходит потому, что вы не предотвращаете поведение браузера по умолчанию, используя 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)">

передать аргумент события для встроенных слушателей событий.

В качестве альтернативы, если form не требуется, то вы можете просто удалить form теги.

Answer 4

Удалить <form> и заменить:

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

чтобы:

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

вызвать функцию onclick из "ajax_delete" через

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

После этого поместите ваш код удаления в файл вызовов ajax.

Answer 5