How to Change Status using Ajax in PHP?

PHP

Teams applying “How to Change Status using Ajax in PHP?” in a production project can use employee physical health to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the PHP project and test it against the project’s actual database and runtime.

Apr 06, 2022

Hi friends,

In this post, we will learn How to Make a Change Status in ajax PHP. i explained simply step by step How To Use Change Status using Ajax in PHP & MySQL. Here you will learn how to Change Status to database Using ajax. This tutorial will give you simple example of ajax Change Status php mysql Code Example.

I will give you simple Example of How to make a ajax Change Status in PHP.

So let's see bellow example:

index.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title></title>
</head>
<body>
    <div class="container">
        <div class="card mt-3">
            <div class="card-header">
              <center>
               <h3>How To Change Status Using Ajax In PHP</h3>
              </center>
            </div>
            <div class="card-body" id="table">
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){

            
            function lodetable(){
                $.ajax({
                url : "table.php",
                    type : "GET",
                    success : function(data){
                        $('#table').html(data);
                    }
                });
            }
            lodetable();
            $(document).on("change","#cheak",function(e){
                var status = $(this).val();
                var id = $(this).data('id');
                if(status == 1){
                    status = 0;
                }else{
                    status = 1;
                }
                $.ajax({
                    url : "status.php",
                    type : "POST",
                    data : {status:status,id:id},
                    success : function(data){
                    }
                });
            });
        });
    </script>
</body>
</html>

status.php

<?php 
    $conn = mysqli_connect("localhost","root","root","status");
    $id = $_POST['id'];
    $status = $_POST['status'];
    $query = "UPDATE student SET status='$status' WHERE id='$id'";
    $result = mysqli_query($conn,$query);
?>

table.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        .switch {
          position: relative;
          display: inline-block;
          width: 60px;
          height: 34px;
        }
        .switch input { 
          opacity: 0;
          width: 0;
          height: 0;
        }
        .slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #ccc;
          -webkit-transition: .4s;
          transition: .4s;
        }
        .slider:before {
          position: absolute;
          content: "";
          height: 26px;
          width: 26px;
          left: 4px;
          bottom: 4px;
          background-color: white;
          -webkit-transition: .4s;
          transition: .4s;
        }
        input:checked + .slider {
          background-color: #2196F3;
        }
        input:focus + .slider {
          box-shadow: 0 0 1px #2196F3;
        }
        input:checked + .slider:before {
          -webkit-transform: translateX(26px);
          -ms-transform: translateX(26px);
          transform: translateX(26px);
        }
        /* Rounded sliders */
        .slider.round {
          border-radius: 34px;
        }
        .slider.round:before {
          border-radius: 50%;
        }
        .card-body{
            padding: 0px !important;
            padding-left: 1px !important;
        }
    </style>
</head>
<body>
    <?php 
        $conn = mysqli_connect("localhost","root","root","status");
        $query = "SELECT * FROM student";
        $result = mysqli_query($conn,$query);
    ?>
    <table class="table table-striped">
      <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Email</th>
            <th scope="col">Status</th>
        </tr>
      </thead>
      <tbody>
        <?php while($row = mysqli_fetch_assoc($result)){ ?>
            <tr>
                <th scope="row"><?php echo $row['id']; ?></th>
                <td><?php echo $row['name']; ?></td>
                <td><?php echo $row['email']; ?></td>
                <td>
                    <label class="switch">
                        <?php if($row['status'] == 1): ?>
                            <input id="cheak" data-id="<?php echo $row['id']; ?>" value="1" type="checkbox" checked>
                        <?php else: ?>
                            <input id="cheak" data-id="<?php echo $row['id']; ?>" value="0" type="checkbox">
                        <?php endif ?>
                      <span class="slider round"></span>
                    </label>
              </td>
            </tr>
        <?php } ?>
      </tbody>
    </table>
</body>
</html>

Output:

I hope it will help you....