Php

How to Update Data in Php using Ajax

Hey Everyone today i am gone tell you How to Update Data in Php using Ajax

We are Covering hole Crud operation in php using JQuery Ajax

  • How to Insert Data in php using Ajax
  • How to View Data in Php using Ajax
  • How to Delete Data in php using Ajax
  • How to Update Data in php using Ajax

What i Use in My JQuery-Ajax Crud Project with php

  • XAMPP Server
  • MySQL for Database
  • JQuery-Ajax CDN Link
  • Php Language
  • VS Code editor

Folder Structure…

 
Step 1) Create Database
Go to This link in Localhost and create database
Database 
  • DB Name: ajax_crud
  • Table name: student
    CREATE TABLE `student` (
    `id` int(11NOT NULL,
    `name` varchar(55NOT NULL,
    `email` varchar(55NOT NULL,
    `message` varchar(55NOT NULL
  ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

 

 

 

Step 2) Create File config.php 
  • it was my Connection file which can connect php to MySQL database to perform Query’s.
    <?php
    /* Database credentials. Assuming you are running MySQL
    server with default setting (user ‘root’ with no password) */
    define(‘DB_SERVER’‘localhost’);
    define(‘DB_USERNAME’‘root’);
    define(‘DB_PASSWORD’);
    define(‘DB_NAME’‘ajax_crud’);
    /* Attempt to connect to MySQL database */
    $link = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
    // Check connection
    if($link === false){
        die(“ERROR: Could not connect. “ . mysqli_connect_error());
    }
    ?>

 

Step 3) Make Some Changes in Delete button 
  • In delete button i add a (  data-id  data-name  data-email  data-message ) to get id on click by using a jquery on read.php
 
<?php
    require ‘config.php’;
    $sql = SELECT * FROM student;
    $result = mysqli_query($link$sql);
    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
?>
        <tr>
            <td><?=$row[‘name’];?></td>
            <td><?=$row[’email’];?></td>
            <td><?=$row[‘message’];?></td>
     <td> <button class=“btn btn-warning btn-sm update”
                    data-bs-toggle=“modal” data-bs-target=“#exampleModal”
 
                                data-id=<?=$row[“id”];?>
                                data-name=<?=$row[“name”];?>
                                data-email=<?=$row[“email”];?>
                                data-message=<?=$row[“message”];?>
                             >Update</button> </td>
            <td> <button class=“btn btn-danger btn-sm delete”
                        data-id=<?=$row[“id”];?> >Delete</button> </td>

 

        </tr>
<?php
    }
    }
    else {
        echo “0 results”;
    }
?>

 

Step 3) Create File Ajax_update.php
  • it is my Ajax_view.php file in this file we are creating dynamic tables using php.
<?php
    require ‘config.php’;
        $id=$_POST[‘id’];
        $name=$_POST[‘name’];
        $email=$_POST[’email’];
        $message=$_POST[‘message’];
        $sql = UPDATE `student` 
        SET `name`=$name‘, `email`=$email‘, `message`=$message‘ WHERE id=$id;
        if (mysqli_query($link$sql)) {
            echo “Data Update”;
        }
        else {
            echo “Data Not update”;
        }

 

?>

 

 

Step 4) Make Some change in  Read.php
  • In this HTML file i add a jquery to get update id on click of open model box . to update details..
  •  
   <!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.0”>
      <!– Bootstrap 5–>
<link href=“https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css”
 rel=“stylesheet”>
        <!– Google Fonts –>
      <link rel=“preconnect” href=“https://fonts.googleapis.com” />
      <link rel=“preconnect” href=“https://fonts.gstatic.com” />
      <link href=“https://fonts.googleapis.com/css2?family=Raleway&display=swap”
 rel=“stylesheet”/>
      <!– Jquery CDN –>
      <script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”>
</script>

 

      <title>Read</title>
      <style>
        body {
          background-colorwhitesmoke;
          font-family“Raleway”sans-serif;
        }
      </style>
  </head>
  <body>

 

  <div class=“container mt-5” style=width:40%>
    <h1 class=“text-center”>View data In Php using Ajax</h1>
    <table class=“table table-bordered text-center mt-4” >
      <thead >
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Message</th>
          <th>Update</th>
          <th>Delete</th>
        </tr>
      </thead>

 

      <tbody id=“table”>
      </tbody>
    </table>
  </div>

 

<script src=“https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js” >
</script>

 

<!– Modal –>
<div class=“modal fade” id=“exampleModal” tabindex=“-1”
 aria-labelledby=“exampleModalLabel” aria-hidden=“true”>
  <div class=“modal-dialog”>
    <div class=“modal-content”>
      <div class=“modal-header”>
        <h5 class=“modal-title” id=“exampleModalLabel”>Modal title</h5>
        <button type=“button” class=“btn-close” data-bs-dismiss=“modal”
aria-label=“Close”>
</button>
      </div>
      <div class=“modal-body”>
      <form id=“myform”>

 

      <div class=“mb-3”>
          <label for=“exampleInputEmail1” class=“form-label”>Id</label>
          <input type=“text” class=“form-control” id=“id” disabled />
        </div>
      <div class=“mb-3”>
          <label for=“exampleInputEmail1” class=“form-label”>Name</label>
          <input type=“text” class=“form-control” id=“name” />
        </div>

 

        <div class=“mb-3”>
          <label for=“exampleInputEmail1” class=“form-label”>Email</label>
          <input type=“email” class=“form-control” id=“email” />
        </div>

 

        <div class=“mb-3”>
          <label for=“exampleInputEmail1” class=“form-label”>Message</label>
          <input type=“text” class=“form-control” id=“message” />
        </div>
        <button type=“button” class=“btn btn-primary”  id=“update_submit” >Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>

 

  <script>
  $(document).ready(function() {
  //Read function
  fetch();
  function fetch(){ $.ajax({
      url: “AJax_view.php”,
      type: “POST”,
      cache: false,
      success: function(data){
        $(‘#table’).html(data);
      }
    });
  }
  //Delete function
    $(document).on(“click”“.delete”function() {
      var delete_id = $(this).data(“id”);
      $.ajax({
        url: “Ajax_delete.php”,
        type: “POST”,
        cache: false,
        data:{
          id: delete_id
        },
        success: function(data_delete){
        alert(data_delete);
        fetch();
        }
      });
  });

 

//Update Get and set on popup from function
$(document).on(“click”“.update”function() {
    var update_id = $(this).data(“id”);
    var update_name = $(this).data(“name”);
    var update_email = $(this).data(“email”);
    var update_message = $(this).data(“message”);

 

      $(‘#id’).val(update_id);
      $(‘#name’).val(update_name);
      $(‘#email’).val(update_email);
      $(‘#message’).val(update_message);

 

});

 

$(‘#update_submit’).on(‘click’function(e) {
        e.preventDefault();

 

    var id = $(‘#id’).val();
    var name = $(‘#name’).val();
    var email = $(‘#email’).val();
    var message = $(‘#message’).val();
        if(id!=“” && name!=“” && email!=“” && message!=“”){
      $.ajax({
        url: “Ajax_update.php”,
        type: “POST”,
        data: {
          id: id,
          name: name,
          email: email,
          message: message
        },
        cache: false,
        success: function(dataru){
                    $(‘#myform’).trigger(“reset”);
             alert(dataru);
             fetch();
        }
      });
    }
    else{
      alert(‘Please fill all the field !’);
    }
  });
  });
  </script>
  </body>
  </html>

 

 

 

 

Go to Browser open url: 
 
 
Read page

 

   

 

 

 

=============================================================================================
 
Model box get 
 
 

 

=============================================================================================
 
After update
 
 
 

 

 

I hope this Post help you….
if you get any errror comment or message me.. i will help you..