Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





How to update data using Ajax in PHP?

How to update data in php using Ajax?


Database Connection

File Name : db.php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$db="itechxpert";
$conn = mysqli_connect($servername, $username, $password,$db);
?>

File Name : index.php

<!DOCTYPE html>
<html lang="en">
<head>
<title>How to update data in php using 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>How to update data in php using ajax</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>Name</th>
<th>Email</th>
<th>Phone</th>
<th>City</th>
<th>Action</th>
</tr>
</thead>
<tbody id="viewdata">

</tbody>
</table>
</div>
<!-- Modal Update-->
<div class="modal fade" id="update_country" 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_modal" id="name_modal" 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_modal" id="email_modal" class="form-control-sm" required>
</div>
</div>
<!--3-->
<div class="row">
<div class="col-md-3">
<label>Phone</label>
</div>
<div class="col-md-9">
<input type="text" name="phone_modal" id="phone_modal" class="form-control-sm" required>
</div>
</div>
<!--4-->
<div class="row">
<div class="col-md-3">
<label>City</label>
</div>
<div class="col-md-9">
<input type="text" name="city_modal" id="city_modal" class="form-control-sm" required>
</div>
</div>
<input type="hidden" name="id_modal" id="id_modal" 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: "View_ajax.php",
type: "POST",
cache: false,
success: function(dataResult){
$('#viewdata').html(dataResult);
}
});
$(function () {
$('#update_country').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 phone = button.data('phone');
var city = button.data('city');
var modal = $(this);
modal.find('#name_modal').val(name);
modal.find('#email_modal').val(email);
modal.find('#phone_modal').val(phone);
modal.find('#city_modal').val(city);
modal.find('#id_modal').val(id);
});
});
$(document).on("click", "#update_data", function() {
$.ajax({
url: "update_ajax.php",
type: "POST",
cache: false,
data:{
id: $('#id_modal').val(),
name: $('#name_modal').val(),
email: $('#email_modal').val(),
phone: $('#phone_modal').val(),
city: $('#city_modal').val(),
},
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
$('#update_country').modal().hide();
alert('Data updated successfully !');
location.reload();
}
}
});
});
});
</script>
</body>
</html>

Ajax page

File Name : view_ajax.php

<?php
include 'database.php';
$sql = "SELECT * FROM itechxpert";
$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['phone'];?></td>
<td><?=$row['city'];?></td>
<td><button type="button" class="btn btn-success btn-sm update" data-toggle="modal" data-keyboard="false" data-backdrop="static" data-target="#update_country"
data-id="<?=$row['id'];?>"
data-name="<?=$row['name'];?>"
data-email="<?=$row['email'];?>"
data-phone="<?=$row['phone'];?>"
data-city="<?=$row['city'];?>"
">Edit</button></td>
</tr>
<?php
}
}
else {
echo "<tr >
<td colspan='5'>No Result found !</td>
</tr>";
}
mysqli_close($conn);
?>

Update ajax

File Name : update_ajax.php

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





Previous Next


Trending Tutorials


PHP

PHP

100+ Tutorials
oops

PHP OOPs

80+ Tutorial
Codeigniter

Codeigniter

100+ Tutorial
Laravel

Laravel

100+ Tutorials
Node.js

NODE.JS

100+ Tutorials
Javascript

Javascript

100+ Tutorials


Review & Rating

0.0 / 5

0 Review

5
(0)

4
(0)

3
(0)

2
(0)

1
(0)

Write Review Here


Most Popular Tutorials

 Important Link