甜蜜警报确认后表单未提交

Question

I'm having a table which contains some rows of data and I have delete button for each row.

My form is not submiting if I implement sweetalert2 with my code, what I need is, I need to delete my row only after sweet alert confirmation button. Here is my Code;

 <tbody> <?php foreach ($category_details as $category_detail): ?> <tr> <td>...</td> <?-- etc --> <form method="post"> <td> <input type="hidden" name="delete-id" value="<;php echo $category_detail['id']? ?>"> <button type="submit" name="single-cdelete" class="swa-confirm btn btn-trash-alt"> <i class="fas fa-trash-alt"></i> </button> </td> </tr> <?php endforeach ?> </tbody> </form>

 if(isset($_POST['single-cdelete'])){ $delete_id = $_POST['delete-id']; $delete_image = $_POST['delete-image']; category_delete($delete_id, $delete_image); } function category_delete($delete_id, $delete_image){ global $db; if(mysqli_query($db, "DELETE FROM categories WHERE id =$delete_id")){ unlink('../assets/images/categories/'.$delete_image); $_SESSION['success'] = "Category has been deleted successfully"; }else{ $_SESSION['success'] ="Something went wrong, Try again"; } }

My SweetAlert Code:

 <script> $(".swa-confirm").on("click", function(e) { e.preventDefault(); Swal.fire({ title: "Are you Sure?", text:"You want to Delete the selected Category", type: "warning", showCancelButton: true, confirmButtonColor: "#cc3f44", confirmButtonText: "Delete", closeOnConfirm: true, html: false }, function( confirmed ) { if( confirmed ){ $('.swa-confirm').submit(); } }); }); </script>

Answer 1

As it's evident from your code, you've used jQuery to perform a form submission.

As per the documentation, https://api.jquery.com/submit/ , the method .submit() can only be used on a form .

The submit event is sent to an element when the user is attempting to submit a form . It can only be attached to <form> elements ..

Forms can be submitted either by clicking an explicit, , or, or by pressing Enter when certain form elements have focus...

It can be seen that you're also relying on some other functionality Swal.fire(..) because of which, you had to do an event.preventDefault() , otherwise, the form would have submitted itself without hassle. But it's understandable that you will need this part of functionality.

So, to solve your problem, you need to add some kind of identifier to your form eg a class or an id . So, instead of doing this:

<form method="post">

..do, something like

<form method="post" id="myform">

..and in the code snippet, use this identifier to call submit() :

update : Also, notice that sweetalert2 supports a promise , and therefore, will recommend using a then -able promise and use a catch block to track any errors.

$(".swa-confirm").on("click", function(e) {

  e.preventDefault();

  Swal.fire({
      ...
    }).then((confirmed) => {
      if (confirmed) {
        $('#myform').submit(); // << here
      }
    })
    .catch((error) => {
      console.log(error)
    });
});

Answer 2

as the comment from @Tangoabc Delta you just can use.submit() event on a form, so:

• first, give your form an id:

   <form method="post" id="swaForm">

• then use the script like this:

   <script> $(".swa-confirm").on("click", function(e) { e.preventDefault(); Swal.fire({ title: "Are you Sure?", text:"You want to Delete the selected Category", type: "warning", showCancelButton: true, confirmButtonColor: "#cc3f44", confirmButtonText: "Delete", closeOnConfirm: true, html: false }).then(function() { $('#swaForm').submit(); }) }); </script>