How to use Sweetalert2 In PHP & MySQL using Ajax?

Apr 09, 2022 . Admin



Hello dev,

I am going to explain you How to use Sweetalert2 In PHP & MySQL using Ajax?. You will learn Integrate Sweetalert 2 In PHP & MySQL Using Ajax.

This article will give you simple example of SweetAlert2 Ajax Delete Rows with PHP MySQL. We will use How to Delete Table Row with Ajax, Sweetalert2 and PHP/MySQLi.

I will give you simple Example of How to use sweetalert2 in php javascript.

So, let's see bellow solution:

connection.php
<?php
    $servername = "localhost";
    $username = "root";
    $password = "root";
    $dbname = "aatman";

    $conn = mysqli_connect($servername, $username, $password, $dbname);
    
    if (!$conn) {
        die("Connection failed: " . mysqli_connect_error());
    }
?>
index.php 
<?php
    include 'connection.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How to use Sweetalert2 In PHP & MySQL using Ajax?</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.4.8/sweetalert2.min.css" integrity="sha512-y4S4cBeErz9ykN3iwUC4kmP/Ca+zd8n8FDzlVbq5Nr73gn1VBXZhpriQ7avR+8fQLpyq4izWm0b8s6q4Vedb9w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.4.8/sweetalert2.min.js" integrity="sha512-7x7HoEikRZhV0FAORWP+hrUzl75JW/uLHBbg2kHnPdFmScpIeHY0ieUVSacjusrKrlA/RsA2tDOBvisFmKc3xw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container mt-5 pt-5">
        <div class="card">
            <div class="card-header text-center">
                <h1>How to use Sweetalert2 In PHP & MySQL using Ajax?</h1>
            </div>
            <div class="card-body">
                <table class="table table-striped table-hover">
                    <tr>
                        <th>NAME</th>
                        <th>EMAIL</th>
                        <th>PHONE</th>
                        <th>message</th>
                        <th>ACTION</th>
                    </tr>

                    <?php
                        $result = mysqli_query($conn,"SELECT * FROM users");
                        $i=1;
                        $id = $row["id"];
                        while($row = mysqli_fetch_array($result)) {
                    ?>
                    <tr id="<?php echo $row["id"]; ?>">
                        <td><?php echo $row["username"]; ?></td>
                        <td><?php echo $row["email"]; ?></td>
                        <td><?php echo $row["mobile"]; ?></td>
                        <td><?php echo $row["message"]; ?></td>
                        <td>
                           <button class='delete btn btn-danger' data-id='<?php echo $row["id"]; ?>' >Delete</button>
                       </td>
                   </tr>
                    <?php
                        $i++;
                        }
                    ?>
               </table>
           </div>
       </div>
   </div>
<script type="text/javascript">
    $(document).ready(function(){
        $('.delete').click(function(){
            $(document).ready(function(){

                $(document).on('click', '.delete', function(){
                    var id = $(this).data('id');
                    swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, delete it!',
                    }).then((result) => {
                        if (result.value){
                            $.ajax({
                                url: 'process.php',
                                type: 'POST',
                                data: {id:id},
                                dataType: 'json'
                            })
                            .done(function(response){
                                swal.fire('Deleted!', response.message, response.status);
                            })
                            .fail(function(){
                                swal.fire('Oops...', 'Something went wrong with ajax !', 'error');
                            });
                        }
                    })
                });
            });
        });
    });
</script>
</body>
</html>
process.php 
<?php
    include 'connection.php';

    $id=$_POST['id'];
    $sql = "DELETE FROM `users` WHERE id=$id ";

    if (mysqli_query($conn, $sql)) {
        echo $id;
    }else {
        echo "Error: " . $sql . "<br>" . mysqli_error($conn);
    }
    mysqli_close($conn);
?>
Output:

It will help you...
#PHP

You might also like...