php insert button value for user - php

Question

i have a table where i print out all of the users for the program. now i would like to have a toggle Bootstrap button for Activate and Incative. I would like to store 1 and 0 into my database. how do i save the value for the specific User ID the value and then update it when the button pressed. Also how to then when it has been pressed to then update the page? is it possible to not refresh the page?
<div class="table-responsive-sm">
<table class="table table-bordered table-condensed table-striped text-center table-dark">
<tr>
<th> First Name</th>
<th>Last Name</th>
<th>E-mail</th>
<th>Username</th>
<th>Accreditation</th>
<th>Instructor ID</th>
<th>Time Registered</th>
<th>Account State</th>
<th>Activate</th>
<th>SET Inactive</th>
</tr>
<?php
$sql = ("SELECT * FROM instructors GROUP BY ID ORDER BY ID DESC ");
$result=mysqli_query($mysqli,$sql);
while ($row=mysqli_fetch_array($result)){
$accred = $row['role'];
if($accred == '0'){
$test = 'Admin';
} else if ($accred == '1') {
$test = 'Bookkeper';
} else if ($accred == '2') {
$test = 'Coordinator';
} else if ($accred == '3') {
$test = 'Instructor';
}
$LoginState = $row['LoginState'];
if($LoginState == '0'){
$LogState = '<td style="color: White; background-color: orangered"><b>Inactive</b></td>';
} else if ($LoginState == '1') {
$LogState = '<td style="color: black; background-color: lightgreen"><b>Active</b></td>';
}
$ID = $row['ID' ];
echo "
<form method=\"POST\">
<tr>
<td>".$row['Fname']."</td>
<td>".$row['Lname']."</td>
<td>".$row['Email']."</td>
<td>".$row['username']."</td>
<td>".$test ."</td>
<td>".$row['ID' ] ."</td>
<td>".$row['RegisteredTime']."</td>
$LogState
<td><button name=\"LoginState\" type=\"button\" class=\"btn btn-success\" role=\"button\" value\"1\">Activate</button</td>
<td><button name=\"LoginState\" type=\"button\" class=\"btn btn-warning\" role=\"button\" value\"0\">SET Inactive</button</td>
</tr></form>";
}
if (isset($_POST['LoginState'])){
$sql1 = "INSERT into instructors (LoginState) VALUES ($logstats) WHERE ID = $ID";
if ($mysqli->query($sql1) === TRUE) {
echo "New record created successfully";
echo "<br/>";
} else {
echo "Error: " . $sql1 . "<br>" . $mysqli->error;
}}

Answer 1

Here is the html code to show toggle button
<td data-title="Status">
<label class="switch">
<input type="checkbox" id="toggle<?php echo $id; ?>" name="status_<?php echo $id; ?>" <?php if($status == 'on'){echo "checked"; }?> >
<div class="toggle round"></div>
</label>
</td>
$id is dynamic id which you get from db.you need proper CSS these classes to make it toggle button.
AJAX call to update records in db onChange of checkbox value
<script type="text/javascript">
$(document).ready(function(){
$('#toggle<?php echo $id; ?>').click(function(){
var id = <?php echo $id; ?>;
if($(this).prop("checked") == true){
var stat = 'on';
}
else if($(this).prop("checked") == false){
var stat = 'off';
}
$.ajax({
type: "POST",
url : "example.php",
data : { id : id,stat :stat },
success: function(data) {
//update value in page acc to new updated value from db
}
});
});
});
</script>
$id is same as above. You need to do update then select query in example.php to update content in page, without refreshing the page

Answer 2

Mark, as others said, if you want to refresh part of your page without reloading the whole page, you need to use AJAX.
One of the most popular and simple way to use AJAX is including the jQuery.js library. If you already use javascript, you will find a bit easy to include jQuery in your page. (you can find and copy the jquery.js file anywhere on internet, just type "download jquery file" in google)
in example, you can put this code in your html (in fact, you can put it almost in any place of your page)
<script type="text/javascript" src="jquery.min.js"></script>
Then you can use the softech's example...
<script type="text/javascript">
$(document).ready(function(){
...
$.ajax({
type: "POST",
url : "PageThatOnlyReturnsData.php",
data : { id:id, stat:stat },
success: function(data) {
//update value in page acc to new updated value from db
}
});
...
});
</script>
It's strongly recommended thay you create another php page to place de mySQL code and returns data (I named in example "PageThatOnlyReturnsData.php"), so this php page will print out the result data from your query.
So, the front php (the first page with HTML) calls the second php (the data php) through the $.ajax() function, and you can process the received data within the "success" function.
success: function(data) {
//here "data" is what you receive from the second php
//do what you want here with javascript using the new variable "data" as in the softech's example
}