Edit/Update Data Using PHP, MySQL, and AJAX Without Refreshing the Page

After fetch row record & display via ajax

on page load call this function

$(document).ready(function () {
    readRecords();
});

readRecords Function

function readRecords() {
    $.ajax({
        url: "get_record.php",
        type: 'POST',
        data: { readrecord: "readrecord" },
        success: function (data) {
            $('#records_contant').html(data);
        }
    });
}

get_record.php file

if (isset($_POST['readrecord']) && $_POST['readrecord'] == 'readrecord') {

   $query = "SELECT * FROM todo_ajax";
   $result = mysqli_query($conn, $query);
  
    $data = "
       <div class='col-6'>
           <button onclick='addData()' class='btn btn-info'>Add New Data</button>
       </div>
       <br>
       <table class='table table-hover'>
           <thead class='table table-dark'>
               <tr>
                   <th>NO.</th>
                   <th>Email</th>
                   <th>Firstname</th>
                   <th>Lastname</th>
                   <th>Address</th>
                   <th>Gender</th>
                   <th>Hobbies</th>
                   <th>Image</th>
                   <th>Phone Number</th>
                   <th>Date of Birth</th>
                   <th>Action</th>
               </tr>
           </thead>";
  
    $number = 1;
   
   while ($user = mysqli_fetch_assoc($result)) {
       
       $hobbiesArray = json_decode($user['hobbies'], true);
       
       if (!is_array($hobbiesArray)) {
           $hobbiesArray = [];
       }
      
        $hobbies = implode(', ', $hobbiesArray);
       
       $data .= "
           <tbody>
               <tr>
                   <td>$number</td>
                   <td>{$user['email']}</td>
                   <td>{$user['firstname']}</td>
                   <td>{$user['lastname']}</td>
                   <td>{$user['address']}</td>
                   <td>{$user['gender']}</td>
                   <td>$hobbies</td>
                   <td><img src='uploads/{$user['img']}' width='50'></td>
                   <td>{$user['phonenumber']}</td>
                   <td>{$user['DOB']}</td>
                   <td>
                       <button onclick='GetUserDetails({$user['id']})' class='btn btn-warning'>Edit</button>
                       <button onclick='DeleteUser({$user['id']})' class='btn btn-danger'>Delete</button>
                   </td>
               </tr>";
       $number++;
   }
   
   $data .= "</tbody></table>";
  
    echo $data;
}

Here put some sample code. for full code end of post click download now

After fetch data display & on click edit edit data

			let formData = new FormData();
               formData.append('firstname', firstname);
               formData.append('email', email);
               formData.append('lastname', lastname);
               formData.append('address', address);
               formData.append('hobbies[]', hobbies);
               formData.append('gender', gender);
               formData.append('img', img);
               formData.append('phonenumber', phonenumber);
               formData.append('DOB', DOB);
               formData.append('recordId', recordId); // Include record ID for editing
               
                 $.ajax({
                   url: "update.php",
                   type: 'POST',
                   data: formData,
                   processData: false,
                   contentType: false,
                   success: function (response) {
                       if (response.success) {
                           alert("Record saved successfully");
                           readRecords();
                       } else {
                           alert("Error saving record");
                       }
                   }
               });
                

Update.php file 

       
    
   $id = $_POST['hidden_user_id'];
   $email = $_POST['update_email'];
   $firstname = $_POST['update_firstname'];
   $lastname = $_POST['update_lastname'];
   $address = $_POST['update_address'];
   $phonenumber = $_POST['update_phonenumber'];
   $DOB = $_POST['update_DOB'];
   $gender = $_POST['update_gender'];
   $hobbies = isset($_POST['update_hobbies']) ? json_encode($_POST['update_hobbies']) : '';
   $existingImg = $_POST['existing_img'];
  
    if ($_FILES['update_img']['name']) {
      
        if (file_exists("uploads/" . $existingImg)) {
           unlink("uploads/" . $existingImg);
       }
      
        $img = $_FILES['update_img']['name'];
       $fileExtension = pathinfo($img, PATHINFO_EXTENSION);
       date_default_timezone_set("Asia/Calcutta");
       $newFileName = date('dmyhis') . '.' . $fileExtension;
       $targetDir = "uploads/";
       $targetFile = $targetDir . $newFileName;
      
        move_uploaded_file($_FILES["update_img"]["tmp_name"], $targetFile);
   				} else {
       				$newFileName = $existingImg;
   				}
   
   $query = "UPDATE mainajaxvalidationcrud SET 
       email = '$email', 
       firstname = '$firstname', 
       lastname = '$lastname', 
       address = '$address', 
       phonenumber = '$phonenumber', 
       DOB = '$DOB', 
       gender = '$gender', 
       hobbies = '$hobbies', 
       img = '$newFileName' 
       WHERE id = $id";
   
   mysqli_query($conn, $query);

}

Download Full Code HERE