Update database using ajax php – How to edit or update Data using PHP Ajax?

update database using ajax php : Here for update or edit data, first we want to fetch existing data from database using Ajax request send to PHP Crud.

update database using ajax php

Here I using main 4 file for update data from MySql database using Ajax.

  1. connection_db.php
  2. member_update.php
  3. member_listing.php
  4. members.php

jQuery ajax add edit delete records in database using php Example with demo.

Table member_data

Step 1: Crate a Database Table

   CREATE TABLE `members_details` (
  `id` int(11) NOT NULL,
  `name` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL,
  `mobile` varchar(100) NOT NULL,
  `address` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

step 2: Connection Database table into PHP

PHP Mysql Create connection
connection_db.php

<?php
	$servername = "localhost";
	$username = "root";
	$password = "[email protected]";
	$db="pakainfo_db1";
	// Create connection
	$conn = mysqli_connect($servername, $username, $password,$db);
?>

Step 3: update database using ajax jquery

member_update.php

<?php
	include 'connection_db.php';
	$id=$_POST['id'];
	$name=$_POST['name'];
	$email=$_POST['email'];
	$mobile=$_POST['mobile'];
	$address=$_POST['address'];
	$sql = "UPDATE `members_details` 
	SET `name`='$name',
	`email`='$email',
	`mobile`='$mobile',
	`address`='$address' WHERE id=$id";
	if (mysqli_query($conn, $sql)) {
		echo json_encode(array("statusCode"=>200));
	} 
	else {
		echo json_encode(array("statusCode"=>201));
	}
	mysqli_close($conn);
?>

Step 4: ajax add edit delete records in database using php

member_listing.php
how to edit data in php?

<?php
	include 'connection_db.php';
	$sql = "SELECT * FROM members_details";
	$result = $conn->query($sql);
	if ($result->num_rows > 0) {
		while($row = $result->fetch_assoc()) {
?>	
		<tr>
			<td><?=$row['name'];?></td>
			<td><?=$row['email'];?></td>
			<td><?=$row['mobile'];?></td>
			<td><?=$row['address'];?></td>
			<td><button type="button" class="btn btn-success btn-sm update" data-toggle="modal" data-keyboard="false" data-backdrop="static" data-target="#member_details"
			data-id="<?=$row['id'];?>"
			data-name="<?=$row['name'];?>"
			data-email="<?=$row['email'];?>"
			data-mobile="<?=$row['mobile'];?>"
			data-address="<?=$row['address'];?>"
			">Edit</button></td>
		</tr>
<?php	
	}
	}
	else {
		echo "<tr >
		<td colspan='5'>No Result found !</td>
		</tr>";
	}
	mysqli_close($conn);
?>

Don’t Miss : Bootstrap Toggle Switch Update Database Field Using Ajax

Also Read This ๐Ÿ‘‰   jQuery Ajax Image Upload without Page Refresh using PHP

Step : 5 Full View Code

update data using ajax in php
members.php

        <!DOCTYPE html>
<html lang="en">
<head>
  <title>View Ajax</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>View Members</h2>
  <div class="alert alert-success alert-dismissible" id="success" style="display:none;">
	  <a href="#" class="close" data-dismiss="alert" aria-label="close">ร—</a>
	</div>
	<table class="table table-bordered table-sm" >
    <thead>
      <tr>
        <th>Member Name</th>
        <th>Member Email</th>
        <th>Member Mobile</th>
		<th>Member Address</th>
		<th>Action</th>
      </tr>
    </thead>
    <tbody id="table">
      
    </tbody>
  </table>
</div>
<!-- Modal Update-->
    <div class="modal fade" id="member_details" role="dialog">
		<div class="modal-dialog modal-sm">
		  <div class="modal-content">
			<div class="modal-header" style="color:#fff;background-color: #e35f14;padding:6px;">
			  <h5 class="modal-title"><i class="fa fa-edit"></i> Update</h5>
			 
			</div>
			<div class="modal-body">
			
				<!--1-->
				<div class="row">
					<div class="col-md-3">
					    <label>Name</label>
					</div>
					<div class="col-md-9">
						<input type="text" name="name_member" id="name_member" class="form-control-sm" required>
					</div>	
				</div>
			    <!--2-->
				<div class="row">
					<div class="col-md-3">
					    <label>Email</label>
					</div>
					<div class="col-md-9">
						<input type="text" name="email_member" id="email_member" class="form-control-sm" required>
					</div>	
				</div>
			    <!--3-->
				<div class="row">
					<div class="col-md-3">
					    <label>mobile</label>
					</div>
					<div class="col-md-9">
						<input type="text" name="mobile_member" id="mobile_member" class="form-control-sm" required>
					</div>	
				</div>
				<!--4-->
				<div class="row">
					<div class="col-md-3">
					    <label>address</label>
					</div>
					<div class="col-md-9">
						<input type="text" name="address_member" id="address_member" class="form-control-sm" required>
					</div>	
				</div>
				<input type="hidden" name="id_member" id="id_member" class="form-control-sm">
			</div>
			<div class="modal-footer" style="padding-bottom:0px !important;text-align:center !important;">
			<p style="text-align:center;float:center;"><button type="submit" id="update_data" class="btn btn-default btn-sm" style="background-color: #e35f14;color:#fff;">Save</button>
			<button type="button" class="btn btn-default btn-sm" data-dismiss="modal" style="background-color: #e35f14;color:#fff;">Close</button></p>
			
		  </div>
		  </div>
		</div>
	</div>
<!-- Modal End-->
<script>
$(document).ready(function() {
	$.ajax({
		url: "member_listing.php",
		type: "POST",
		cache: false,
		success: function(dataResult){
			$('#table').html(dataResult); 
		}
	});
	$(function () {
		$('#member_details').on('show.bs.modal', function (event) {
			var button = $(event.relatedTarget); /*Button that triggered the modal*/
			var id = button.data('id');
			var name = button.data('name');
			var email = button.data('email');
			var mobile = button.data('mobile');
			var address = button.data('address');
			var member = $(this);
			member.find('#name_member').val(name);
			member.find('#email_member').val(email);
			member.find('#mobile_member').val(mobile);
			member.find('#address_member').val(address);
			member.find('#id_member').val(id);
		});
    });
	$(document).on("click", "#update_data", function() { 
		$.ajax({
			url: "member_update.php",
			type: "POST",
			cache: false,
			data:{
				id: $('#id_member').val(),
				name: $('#name_member').val(),
				email: $('#email_member').val(),
				mobile: $('#mobile_member').val(),
				address: $('#address_member').val(),
			},
			success: function(dataResult){
				var dataResult = JSON.parse(dataResult);
				if(dataResult.statusCode==200){
					$('#member_details').modal().hide();
					alert('Data updated successfully !');
					location.reload();					
				}
			}
		});
	}); 
});
</script>
</body>
</html>

I hope you get an idea about insert delete update data using ajax in php.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, donโ€™t forget to share.