custom pop up when clicked delete button using js in php

Question

So i was making a project and i wanted to make it so when admin clicked on the delete button a custom alert popups which have three buttons "Yes" and "No" so if admin clicks on the yes button the user get deleted and if he clicks on the no buttons the users doesn't get deleted and the list remains the same i can make it so a the js alert popups and get the job done but its to simple and i wanted to have a customized alert box so here is the code

<tbody>
  <tr>
    <td> <?php echo $value['0']; ?> </td>
    <td> <?php echo $value['1']; ?> </td>
    <td> <?php echo $value['2']; ?> </td>
    <td> <?php echo $value['3']; ?> </td>
    <td> <?php echo $value['4']; ?> </td>
    <td><img src="./assets/img/<?php echo $value['5'];?>" width="150px"</td>
    <td> <?php echo $value['6']; ?> </td>
    <td> <?php echo $value['7']; ?> </td>
    <td><a href="./updateUser.php" class="btn btn-success">Edit</a></td>
    <td><a href="./users.php?id=<?php echo $value[0] ?>" onclick="confirmDelete()" class="btn btn-danger">Delete </a></td>
    <script>
      function confirmDelete() {
        Swal.fire({
          title: 'Are you sure you want to Delete this entry?',
          showDenyButton: true,
          showCancelButton: true,
          confirmButtonText: 'Yes',
          denyButtonText: `No`,
        }).then((result) => {
          /* Read more about isConfirmed, isDenied below */
          if (result.isConfirmed) {
            Swal.fire('Deleted!', '', 'success')
          } else if (result.isDenied) {
            Swal.fire('Deletion Was Cancelled', '', 'info')
          }
        })
      }
    </script>
  </tr>
<?php if (isset($_GET["id"])) {
        $id = $_GET["id"];
        $query_remove = "DELETE FROM `users` WHERE `id` = $id";
        mysqli_query($conn, $query_remove);
   }
?>
</tbody>

this is the code,

p.s. i am using sweet alert 2 for cutom alerts.

and as mentioned above i tried this

<td><a href="./users.php?id=<?php echo $value[0] ?>" onclick="return confirm('are you sure you want to delete??')" class="btn btn-danger">Delete</a></td>

and it pops up a simple alert which i don't want so is there any way to do it?

In what way does this "cancel" button differ from the "no" (do not delete) button? — KIKO Software, Mar 23 '22 at 08:23
the no button keeps the id in the url while the cancel button remove the id from the url (still working on it) — helloWorld, Mar 23 '22 at 08:26
**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/32391315) — Dharman, Mar 23 '22 at 10:45
What's your question about this? What have you tried to resolve your requirement? — Nico Haase, Mar 23 '22 at 12:59

score 0 · Answer 1 · edited Mar 23 '22 at 10:46

You are not performing any action on result.isConfirmed

Try this. First add a class to your <td> and a data-attr element and remove the onclick attribute, we will let JavaScript handle this.

<td><a href="javascript:void(0)" data-id="<?php echo $value[0] ?>" class="btn btn-danger btn-delete-user">Delete </a></td>

<script>
$(document).delegate(".btn-delete-user", "click", function() {
        Swal.fire({
          title: 'Are you sure you want to Delete this entry?',
          showDenyButton: true,
          showCancelButton: true,
          confirmButtonText: 'Yes',
          denyButtonText: `No`,
        }).then((result) => {
          /* Read more about isConfirmed, isDenied below */
          if (result.isConfirmed) {

            var userId = $(this).attr('data-id');

            // Ajax config
            $.ajax({
                type: "GET", //we are using GET method to get data from server side
                url: './users.php', // get the route value
                data: {id:userId}, //set data
                beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click
                    
                },
                success: function (response) {//once the request successfully process to the server side it will return result here
                    Swal.fire('Success.', response, 'success')
                }
            });

            
          } else if (result.isDenied) {
            Swal.fire('Changes are not saved', '', 'info')
          }
        });

        
    });
 }
</script>

Please make sure you are using Jquery

For reference Integrate Sweetalert 2 In PHP & MySQL Using Ajax

custom pop up when clicked delete button using js in php

1 Answers1