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

JavaScript, jQuery, Mysql, Mysqli, php Leave a comment

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);
?>

Free Live Chat for Any Issue

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

Read Also:  features of javascript - Latest features of JavaScript | Learn JavaScript Tutorial

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>

Download

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.

Related posts:

  1. PHP CRUD Create, edit, update and delete Records with MySQL database
  2. jQuery AJAX laravel 6 Delete Data from database
  3. laravel 6 Update Data in AJAX CRUD Operations
  4. Laravel Toggle Switch with Ajax Update Database
  5. how to update data from database in mysql php?
  6. how to insert data using ajax in laravel with datatables?
  7. laravel 6 Retrieve data using jQuery Ajax
  8. Bootstrap Toggle switch Update Database field using Ajax
Read Also:  PHP Future