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

Contents

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

connection_db.php
member_update.php
member_listing.php
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.