Checkbox values from all table pages are not returned

Question

I have a multi-page table with a loop. The table contains checkboxes. When you select one or more checkboxes are displayed from the values as a list. Within one page everything works correctly, but when I switch to the second page and select the checkbox, immediately the values in the list are reset and the values are displayed only from the second page.

Loop in the table

 <?php
while($row1 = mysqli_fetch_array($result1))
{
    $rand1 = rand() . "\n";
    $rand2 = rand() . "\n";
    $rand3 = rand() . "\n";
    $rand4 = rand() . "\n";
    $rand5 = rand() . "\n";
    $rand6 = rand() . "\n";
                            
    echo '<tr><td><font face="Verdana">'.$row1["name"].'</font></td>';
                                        
    echo '<td>
                <center>
                    <font face="Verdana">
                    <b>
                        <input type="checkbox" 
                            onclick="usluga()" 
                            id="'.$rand1.'" 
                            class="checkbox-offers" 
                            name="• <font size=2px>'.$row1["name"].'</font><br/>" value="'.$row1["len"].'" />
                        <label for="'.$rand1.'">'.preg_replace("/^$/","<font color=red size=2px style='text-transform: uppercase;'>Услуга не оказывается</font>",$row1["len"]).'</label>
                    </b>
                    </font>
                </center>
            </td>';
                                       
    echo '<td><center><font face="Verdana"><b><input type="checkbox" onclick="usluga()" id="'.$rand2.'" class="checkbox-offers" name="• <font size=2px>'.$row1["name"].'<br/>" value="'.$row1["myt"].'" /><label for="'.$rand2.'">'.preg_replace("/^$/","<font color=red size=2px style='text-transform: uppercase;'>Услуга не оказывается</font>",$row1["myt"]).'</label></b></font></center></td>';
                                   
    echo '<td><center><font face="Verdana"><b><input type="checkbox" onclick="usluga()" id="'.$rand3.'" class="checkbox-offers" name="• <font size=2px>'.$row1["name"].'<br/>" value="'.$row1["tr"].'" /><label for="'.$rand3.'">'.preg_replace("/^$/","<font color=red size=2px style='text-transform: uppercase;'>Услуга не оказывается</font>",$row1["tr"]).'</label></b></font></center></td>';
                                  
    echo '<td><center><font face="Verdana"><b><input type="checkbox" onclick="usluga()" id="'.$rand4.'" class="checkbox-offers" name="• <font size=2px>'.$row1["name"].'<br/>" value="'.$row1["kr"].'" /><label for="'.$rand4.'">'.preg_replace("/^$/","<font color=red size=2px style='text-transform: uppercase;'>Услуга не оказывается</font>",$row1["kr"]).'</label></b></font></center></td>';
                                  
    echo '<td><center><font face="Verdana"><b><input type="checkbox" onclick="usluga()" id="'.$rand5.'" class="checkbox-offers" name="• <font size=2px>'.$row1["name"].'<br/>" value="'.$row1["var"].'" /><label for="'.$rand5.'">'.preg_replace("/^$/","<font color=red size=2px style='text-transform: uppercase;'>Услуга не оказывается</font>",$row1["var"]).'</label></b></font></center></td>';
                                  
     echo '<td><center><font face="Verdana"><b><input type="checkbox" onclick="usluga()" id="'.$rand6.'" class="checkbox-offers" name="• <font size=2px>'.$row1["name"].'<br/>" value="'.$row1["kor"].'" /><label for="'.$rand6.'">'.preg_replace("/^$/","<font color=red size=2px style='text-transform: uppercase;'>Услуга не оказывается</font>",$row1["kor"]).'</label></b></font></center></td>'; 
}
?>

Function for outputting checkbox values

function usluga() {

    var x = [].map.call(document.querySelectorAll('[class="checkbox-offers"]:checked'), function(v) {
        return v.name
    }).join(' ');
    document.getElementById("usluga").innerHTML = x;
};

And here the values are displayed

<p id="usluga"></p>

Help, please. For the second day I am trying to solve the problem.

Big thnx for all!

You have a very odd `name` attribute `name="• '.$row1["name"].'
"` — RiggsFolly, Apr 01 '23 at 11:50
I think you have not looked closely, see my edit of the first input — RiggsFolly, Apr 01 '23 at 11:54
@RiggsFolly Unfortunately, your edits are not related to my problem. :( — John Bolgov, Apr 01 '23 at 12:00

score 0 · Answer 1 · answered Apr 02 '23 at 02:26

0

This is expected behaviour, variables do not carry over when you switch to a different page.

You could fix this by changing your function to store the variable in the local storage, that way you can retrieve it after switching to a different page.

This might help: Passing Variable through JavaScript from one html page to another page

answered Apr 02 '23 at 02:26

Jalen

45
7

Hi, Jalen! HTML page one. It has a DataTable with several pages inside. – John Bolgov Apr 02 '23 at 04:29
Whenever you set the element usluga it only recognizes the checboxes on the current page. What method are you using to switch between pages? I feel like I'm missing some context here. – Jalen Apr 03 '23 at 02:48

Checkbox values from all table pages are not returned

1 Answers1