Jquery, Ajax save to database - php

Question

I am trying to create a simple attendance register for a kids club, when they turn up for a practice session they need to record who's paid on the night. It's more or less works as I want it to, but I'm struggling with the last bit.
When I click on the button to add a user_id to the paid table, along with the date and and status, it does as expected, so all good there. However, I would like the button to change icons based on Paid status, which I can do buy reading a database value -
<button type="button" class="btn btn-sm btn-success btn-status" id="<?php echo $row['user_id']; ?>" data-status="<?php echo $row['status']; ?>" title="Active/Deactive details" >
<?php if(empty($row['status'])){ ?>
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
<?php }else{ ?>
<i class="fa fa-ban" aria-hidden="true"></i>
<?php } ?>
On button click the following jQuery handles the post event -
$(document).on('click', '.btn-status', function(ev){
ev.preventDefault();
var btn_button = $(this);
var status = 1;
btn_button.html(' <i class="fa fa fa-spinner fa-spin"></i> ');
var tbl_id = $(this).attr("id");
var tbl_status = $(this).data("status");
if(tbl_status == 0) status = 1;
else status = 0;
$.post('save_details.php', { form_name: "user_status", tbl_id: tbl_id, status: status }, function(data,status){
console.log(data);
if(data == "1"){
$('.warning-modal-message').html("Record status changed successfully.");
$('#warningModal').modal('show');
setTimeout(function(){ location.reload(); }, 2000);
}
else{
$('.warning-modal-message').html("Data deletion failed.");
}
});
});
And the PHP for the database -
if($form_name == "user_status"){
$tbl_id = mysql_real_escape_string($_POST['tbl_id']);
$status = mysql_real_escape_string($_POST['status']);
$query = "insert into attendance(rider_id, at_status, at_date) values('$tbl_id','$status',NOW())";
$result = mysql_query($query) or die(mysql_error());
if($result)
echo "1";
else
echo "0";
}
The problem I'm having is the the query relies on the status field in the user data table to control which icon is visible. What I need is a way to have all the icons set to fa-ban icon on page reload and the thumb icon when the button is pressed to take attendance.
I have tries setting the $row['status']; to 1 manually, I have tried Bootstrap Toggle Switch, Bootstrap Toggle Button and loads of articles on here but I'm not having any luck

Answer 1

I managed to get it working more or less as needed using Bootstrap Toggle Switch -
<input type="checkbox" id="<?php echo $row['user_id']; ?>" class="toggleBtn" name="toggleBtn" data-toggle="toggle" data-on="Paid Fees" data-off="Unpaid" data-onstyle="success" data-offstyle="danger" data-size="small" >
Using the following jQuery -
$(document).on('change', '.toggleBtn', function(ev){
ev.preventDefault();
// Disable switch on click to help prevent multiple submit
$(this).bootstrapToggle('disable');
//var btn_button = $(this);
var status = $(this).prop('checked');
//btn_button.html(' <i class="fa fa fa-spinner fa-spin"></i> ');
var tbl_id = $(this).attr("id");
var tbl_status = $(this).data("status");
//if(tbl_status == 0) status = 1;
//else status = 0;
$.post('save_details.php', { form_name: "user_status", tbl_id: tbl_id, status: status }, function(data,status){
console.log(data);
if(status == "checked"){
$('.warning-modal-message').html("Record status changed successfully.");
$('#warningModal').modal('show');
setTimeout(function(){ location.reload(); }, 2000);
}
else{
$('.warning-modal-message').html("Data deletion failed.");
}
});
});
And the following PHP -
if($form_name == "user_status"){
$tbl_id = mysql_real_escape_string($_POST['tbl_id']);
$status = mysql_real_escape_string($_POST['status']);
//SELECT * FROM `attendance` WHERE `rider_id` = 1 AND `at_date` = DATE(NOW())
$result = "SELECT * FROM `attendance` WHERE `rider_id` = '$tbl_id' AND `at_date` = DATE(NOW())";
$total = ($result);
if($total==0){
$query = "insert into attendance(rider_id, at_status, at_date) values('$tbl_id','$status',NOW())";
$result = mysql_query($query) or die(mysql_error());
}
//$query = "insert into attendance(rider_id, at_status, at_date) values('$tbl_id','$status',NOW())";
//$result = mysql_query($query) or die(mysql_error());
//if($result)
//echo "1";
//else
//echo "0";
}
A couple of the issues I'm having now is that the warnings are not showing up and the $qry to check if a rider has already been entered on the day (the switches are reset on page refresh!
if(status == "checked"){
$('.warning-modal-message').html("Record status changed successfully.");
$('#warningModal').modal('show');
setTimeout(function(){ location.reload(); }, 2000);
}
else{
$('.warning-modal-message').html("Data deletion failed.");
}
Thanks!