javascript - Database update through checkbox change

Question

For my thesis, I am working on a program for checking cars. Currently, I am working on the user management now I have encountered the problem that the database needs to be updated when a checkbox is changed status.

Image checkboxes:

Now I have already started looking a bit on how to execute a PHP function when this happens, and I ended up with a JavaScript AJAX function

 <script>
    function update () 
    {
        $.
        ({
            url:"includes/update_database.php",    //the page containing php script
            type: "POST",    //request type,
            dataType: 'json',
            data: { // STUCK },
        });
    }
</script>

Now I have the problem that I do not know what to include with data because I have several checkboxes that are being shot by PHP. I don't know exactly how to update my database. Do I have to run all over the table to detect changes?

Code from my table:

<div class="table-responsive">
    <table class="table">
        <thead class="thead-dark">
            <tr>
                <th scope="col">Username</th>
                <th scope="col">E-mail</th>
                <th class="text-center" scope="col">Geactiveerd</th>
                <th class="text-center" scope="col">Admin</th>
            </tr>
        </thead>
        <tbody>
        <?php 
            // Variablen
            $geactiveerd;
            // Items uit datbank halen uit de databank halen
            $query="SELECT ID, Username, Email, geactiveerd, admin FROM TBLgebruikers";
            // Voert de query uit op de databank
            $result=mysqli_query($mysqli, $query);
            // Haalt het resultaat op en steekt het in een rij als een array
            // Gaat over heel de rijd zoeken -> while
            while($row=mysqli_fetch_array($result)) 
            {
                // Echo eerste rij username/email --> Html
                echo ' 
                <tr>
                    <td>' . $row["Username"] .'</td>
                    <td>'.$row["Email"] .'</td>
                ';
                // Haal uit de rijd geactiveerd(local variable) = geactiveerd(db)
                $geactiveerd=$row['geactiveerd'];
                $admin=$row['admin'];
                // Als geactiveerd == 0 en admin == 00 --> 0 = true
                if($geactiveerd==0 && $admin==0) 
                {
                    // 1- Echo geactiveerd -> checbbox aangevinkt
                    // 2- Echo admin -> checbbox aangevinkt
                    echo '
                    <td class="active" style="text-align: center">
                        <label class="switch" margin-bottom: -2px;>
                            <input type="checkbox" name="geactiveerd" checked>
                            <span class="slider round"></span>
                        </label>
                    </td>
                   
                    <td class="active" style="text-align: center">
                        <label class="switch" margin-bottom: -2px;>
                            <input type="checkbox" name="admin" checked>
                            <span class="slider round"></span>
                        </label>
                    </td>
                    ';
                }
                // Als geactiveerd == 1 en admin == 0 --> 0 = true 1 = false
                elseif($geactiveerd==1 && $admin==0) 
                {
                    // 1- Echo geactiveerd -> checbbox niet aangevinkt
                    // 2- Echo admin -> checbbox aangevinkt
                    echo '
                    <td class="active" style="text-align: center">
                        <label class="switch" margin-bottom: -2px;>
                            <input type="checkbox" name="geactiveerd">
                            <span class="slider round"></span>
                        </label>
                    </td>
                    <td class="active" style="text-align: center">
                        <label class="switch" margin-bottom: -2px;>
                            <input type="checkbox" name="admin" checked>
                            <span class="slider round"></span>
                        </label>
                    </td>
                    ';
                }
                // Als geactiveerd == 0 en admin == 1 --> 0 = true 1 = false
                elseif($geactiveerd==0 && $admin==1) 
                {
                    // 1- Echo geactiveerd -> checbbox geactiveerd
                    // 2- Echo admin -> checbbox niet aangevinkt
                    echo '
                    <td class="active" style="text-align: center">
                        <label class="switch" margin-bottom: -2px;>
                            <input type="checkbox" name="geactiveerd" checked>
                            <span class="slider round"></span>
                        </label>
                    </td>
                    <td class="active" style="text-align: center">
                        <label class="switch" margin-bottom: -2px;>
                            <input type="checkbox" name="admin">
                            <span class="slider round"></span>
                        </label>
                    </td>
                    ';
                }
                else
                {
                    // Anders echo admin  en gactiveerd niet aangevinkt
                    echo '
                    <td class="active" style="text-align: center">
                        <label class="switch" margin-bottom: -2px;>
                            <input type="checkbox" name="geactiveerd">
                            <span class="slider round"></span>
                        </label>
                    </td>
                    <td class="active" style="text-align: center">
                        <label class="switch" margin-bottom: -2px;>
                            <input type="checkbox" name="admin">
                            <span class="slider round"></span>
                        </label>
                    </td>
                    ';
                }
                echo '</tr>';
            }
        ?>
        </tbody>
    </table>
</div>

Answer 1

Listed for changes on the checkboxes. A simple way to do that is assign a class like 'mycheckbox' to each one so you can easily find them all. Once the page is loaded, add the change event trigger to the checkboxes.

$('.mycheckbox').change(function(e){
    // Get row id or whatever you need to relate it to info in the DB
    rowid = $(e.target).attr('id');
    isChecked = $(e.target).is(':checked');
    data = {id: rowid, active: isChecked};
    
    $.ajax({
        url: 'myscript.php',
        method: 'POST',
        dataType: 'json',
        data: data
    });
    
});

Your php script would be something like this:

data = $_POST['data'];

id = data['id'];
isChecked = data['active'];

// do your sql code stuff

This is a very basic example, and of course you'd want to sanitize or validate the data if you plan to insert any of it into the DB.