Apr 06, 2022
.
Admin
Hi friends,
In this post, we will learn How to Make a Change Status in ajax PHP. i explained simply step by step How To Use Change Status using Ajax in PHP & MySQL. Here you will learn how to Change Status to database Using ajax. This tutorial will give you simple example of ajax Change Status php mysql Code Example.
I will give you simple Example of How to make a ajax Change Status in PHP.
So let's see bellow example:
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="container">
<div class="card mt-3">
<div class="card-header">
<center>
<h3>How To Change Status Using Ajax In PHP</h3>
</center>
</div>
<div class="card-body" id="table">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
function lodetable(){
$.ajax({
url : "table.php",
type : "GET",
success : function(data){
$('#table').html(data);
}
});
}
lodetable();
$(document).on("change","#cheak",function(e){
var status = $(this).val();
var id = $(this).data('id');
if(status == 1){
status = 0;
}else{
status = 1;
}
$.ajax({
url : "status.php",
type : "POST",
data : {status:status,id:id},
success : function(data){
}
});
});
});
</script>
</body>
</html>
status.php
<?php
$conn = mysqli_connect("localhost","root","root","status");
$id = $_POST['id'];
$status = $_POST['status'];
$query = "UPDATE student SET status='$status' WHERE id='$id'";
$result = mysqli_query($conn,$query);
?>
table.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.card-body{
padding: 0px !important;
padding-left: 1px !important;
}
</style>
</head>
<body>
<?php
$conn = mysqli_connect("localhost","root","root","status");
$query = "SELECT * FROM student";
$result = mysqli_query($conn,$query);
?>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<?php while($row = mysqli_fetch_assoc($result)){ ?>
<tr>
<th scope="row"><?php echo $row['id']; ?></th>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['email']; ?></td>
<td>
<label class="switch">
<?php if($row['status'] == 1): ?>
<input id="cheak" data-id="<?php echo $row['id']; ?>" value="1" type="checkbox" checked>
<?php else: ?>
<input id="cheak" data-id="<?php echo $row['id']; ?>" value="0" type="checkbox">
<?php endif ?>
<span class="slider round"></span>
</label>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</body>
</html>
Output:
I hope it will help you....
#PHP
