PHP: Update database with checkbox values for each row - php

Question

I'm currently working on displaying a table containing a list of alarms, where each row contains a checkbox that determines whether the user has already viewed that alarm or not. Here's
an image:
So far, I managed to check/uncheck the checkbox given its state in the database. What I want to do, and don't exactly know how to, allow the user to check/uncheck a checkbox and immediately update the database with this new state without pressing a submit button. The code that I have right now is the following.
<div class="card-body table-responsive p-0">
<form action=modules/alarms.php method="POST">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>Tipus</th>
<th>Data</th>
<th>Vista</th>
</tr>
</thead>
<tbody>
<?php
foreach ($result->fetchAll() as $row){
if ($row[4] == 1){
$status = "checked";
}else{
$status = "";
}
echo
'<tr data-widget="expandable-table" aria-expanded="false">
<td>'.$row[0].'</td>
<td>'.$row[1].'</td>
<td>'.$row[2].'</td>
<td><input type="checkbox" name="chk1[]" value="viewed" '.$status.'></td>
</tr>
<tr class="expandable-body">
<td colspan="5">
<p>
<video width="416" height="416" controls>
<!-- el 42 es la cabecera C:/... fins videos-->
<source src="'.substr($row[3], 42).'" type="video/mp4">
Your browser does not support the video tag.
</video>
</p>
</td>
</tr>';
}
?>
</tbody>
</table>
And the PHP code I have (I don't have the code that will update values on the database, but I'll figure that out. I want to know how I could retrieve the value of the checkbox of every row and its ID so I can update it on the database.
$ei = $_POST['chk1'];
if ($_POST["chk1"] == "chk1") {
for ($i = 0; $i < sizeof($checkbox1); $i++) {
print_r($checkboxl[$i]);
}
}

Answer 1

To solve this problem, first I had to add some fields to the checkbox input. WIth those changes, the table is generated as it follows:
<tr data-widget="expandable-table" aria-expanded="false">
<td>'.$row[0].'</td>
<td>'.$row[1].'</td>
<td>'.$row[2].'</td>
<td><input type="checkbox" name="id" id="viewed" value="'.$row[0].'" '.$status.'></td>
</tr>
After this is done, simply add a script that will retrieve the values from the clicked checkbox and pass them to the necessary PHP function:
$("input").change(function() {
if ($(this).is(':checked')){
var viewed=1;
}else{
var viewed = 0;
}
var id = $(this).val();
$.ajax({
url:"modules/alarms.php",
method:"POST",
data:{viewed:viewed,id:id,},
success: function(data){
},
});
Please note that the 'url' field is the relative path where our PHP function is implemented.
And now, simply update the database with the checkbox value (I'm using PDO objects) as it follows:
<?php
if(isset($_POST["viewed"])) {
$id = $_POST["id"];
$viewed = $_POST["viewed"];
$sql="UPDATE `alarms` SET `viewed` = '$viewed' WHERE (`id` = '$id')";
if($connection->query($sql) === TRUE){
echo "Success";
} else {
echo "error" . $sql . "<br>".$connection->error;
}}?>