Here we using 4 file for update data from MySql database using Ajax.
CREATE TABLE `crud` (
`id` int(11) NOT NULL,
`name` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
`phone` varchar(100) NOT NULL,
`city` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
<?php
$servername = "localhost";
$username = "root";
$password = "";
$db="school";
/* Create connection */
$conn = mysqli_connect($servername, $username, $password,$db);
?>
<?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);
?>
<?php
include 'database.php';
$sql = "SELECT * FROM crud";
$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);
?>
<!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 data</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="table">
</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){
$('#table').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>