Approve And Disapprove in Ajax, PHP & MySQL

Hello Developer, In this tutorial, you will learn to approve and disapprove status in ajax, PHP & MySQL on the button click. I have shared the approval functionality with some simple steps that are very easy to use in web applications.

How does it work –  By default, table data is displayed with green approve buttons. When you click the approve button, It will change to a red disapprove button. Similarly, When you click disapprove button, It will change to approve button. This functionality will work without reloading the page and also It will update the status value in the database.

Here, I have created this functionality with an article post that will be posted by the user and then the admin will approve that article using this functionality. Once you learn it, You can customize it according to your project requirement.

approve and disapprove in ajax, php & mysql

Approve and Unapproved Status on the  Button Click using Ajax, PHP & MySQL

Before getting started, you should create the following folder structure so, that you can easily write code to approve and un-approve status in ajax, PHP & MYSQL.

Learn Also –

Check an Email Already exists in the Database using Ajax & PHP

Check Username Availability using Ajax & PHP

How to create dependent dropdown using ajax & PHP

Load more data on Infinite Scroll Using ajax & PHP

Folder Structure –


Let’s start coding from the next step –

1. Create MySQL Database & Table

You can use create a database & table in the PHPMyAdmin according to the following sql query –

Database Name – codingstatus

Table Name – articles

CREATE TABLE `articles` (
  `heading` varchar(255) DEFAULT NULL,
  `content` text(2000) DEFAULT NULL,
  `status` tinyint(4) DEFAULT 0,
  `created_at` timestamp(5) DEFAULT NULL,
  `updated_at` datetime(5) DEFAULT NULL,

2. Connect to MySQL Database

Now,  You can connect your PHP to MySQL database using the following query. If you have already done it, then you can skip this step.

File Name – database.php

$hostName = "localhost";
$userName = "root";
$password = "";
$databaseName = "codingstatus";
 $conn = new mysqli($hostName, $userName, $password, $databaseName);
// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);

3. Fetch Data From MySQL Table

To fetch data from the MySQL Table, I have created the following custom function. You can use it. If you use your own code to fecth data. then you can skip this step.

fetchData() – This function accepts a parameter $conn to connect database and returns all the data from the “articles” table in an array formate

File Name – fetch-data.php

function fetchData($conn){
    $sql = "SELECT * FROM articles";
    $result = $conn->query($sql);
    if ($result->num_rows > 0) {
    $row= $result->fetch_all(MYSQLI_ASSOC);
    return $row;  
    return $row=[];

4. Display Data with Approval Button

To display data with the approval button, you will have to follow the following steps –

Step-1: Include the database.php and fetch-data.php using the include() method. But you must keep a database.php file above the fetch data. Otherwise, It may not work.

Step-2: Create an HTML Table and display data using fetchdata() function.

Step-3: Write CSS code to design approve and disapprove button

Step-4: Create a status button  and call ajax custom function updateStatus() within onclick event and pass article id as a paramter. Also, declare an id with value  statusBtn<?php echo $data[‘id’]; ?>.

Step-5: Include the jquery CDN and custom-ajax.js file.

File Name – approval-button.php

<!DOCTYPE html>
       padding:5px 10px;
       cursor: pointer;
       box-shadow:0px 0px 15px gray

<!-- ===== displaying data with approval button ===== -->
<table border="1" cellspacing="0" cellpadding="10" width="50%">
$fetchData = fetchData($conn);
foreach($fetchData as $data){
       <td><?php echo $i; ?></td>
       <td><?php echo $data['heading']; ?></td>
       <td><?php echo $data['content']; ?></td>
       <td><button onclick="updateStatus(<?php echo $data['id'];?>)" id="statusBtn<?php echo $data['id'];?>" class="status-btn <?php echo $data['status']==0?'approve':'disapprove'; ?>"><?php echo $data['status']==0?'Approve':'Disapprove'; ?></button></td>
        <?php  $i++; } } ?>
<!-- ============displaying data with approval button========== -->

<script src=""></script>
<script scr="custom-ajax.js" /></script>


5.  Approve & Disapprove with Ajax

You can use the following ajax code to approve & disapprove status

File Name – custom-ajax.js

const updateStatus= function(id){

        type: "POST",
        url: "update-status.php", 
        dataType: "html",                  
        success: function(data){  
           }else if(data==0){
           // change status btn coloe
           }else if($("#statusBtn"+id).hasClass("disapprove")){


6. Update Approval Status with PHP & MySQL

PHP code of this file executes to update the status value in the database. It will update the approval status when ajax sends a request with an id on the pprove or disapprove button click.

You can write PHP MYSQL code to update the approval status by using the following steps

Step-1: Include the database.php file to connect the database

Step-2: Create a custom function getStatus() with two arguments $conn & $id and write the query to fetch status value from the “articles” table base on the id.

Step-3: Also, Create a custom function updateStatus() with two arguments $conn & $updateId. and write the update query based on the status value & updateId.

Step-4: check $_POST[‘updateId’] with isset() & if condtion . It is true then  call updateStatus() function. Where, updateId is defined in the ajax code.

File Name – update-status.php

    $updateId = $_POST['updateId'];
    updateStatus($conn, $updateId);

function updateStatus($conn, $updateId){

    $getStatus= getStatus($conn, $updateId);

            $sql = "UPDATE articles SET status=1 WHERE id=$updateId";
        if ($conn->query($sql) === TRUE) {
             echo 1;
           $sql = "UPDATE articles SET status=0 WHERE id=$updateId";
        if ($conn->query($sql) === TRUE) {
            echo 0;

        echo "No data is exist in database";


function getStatus($conn, $id){

    $query= "SELECT status FROM articles WHERE id=$id";
    $result = $conn->query($query);
    if ($result->num_rows > 0) {
      $row = $result->fetch_assoc();
       $row =[];
    return $row;