why Javascript function executes only once inside a php loop?

Question

I have the HideCheckbox() function to be executed inside a php loop.

the main point is to hide the checkbox every time the div loads.

However, the checkbox will be hidden only in the first div.

Here is the code:

<script type="text/javascript">
function HideCheckbox() {
            document.getElementById("deleteCarCheckbox").style.display = "none";
        }
</script>
<?php
        $username = $_SESSION['username'];

            try{
                $link = mysqli_connect("localhost","root","","db");
                $sql = mysqli_query($link,"a sql query");
                while ($donnees = mysqli_fetch_array($sql)){

?>
<div class="block-car">
<input type="checkbox" id="deleteCarCheckbox" name="deleteCar" style="float:right">
</div>
<script type="text/javascript">
        HideCheckbox();
        </script>



<?php
         }
        catch(Exception $e){die('Erreur : '.$e->getMessage());}
       }
?>

score 1 · Accepted Answer · answered Dec 29 '15 at 04:16

the value of id field must be unique, the code below should do the trick:

<script type="text/javascript">
function HideCheckbox(i) {
    document.getElementById("deleteCarCheckbox" + i).style.display = "none";
}
</script>

<?php
$username = $_SESSION['username'];

try{
    $link = mysqli_connect("localhost","root","","db");
    $sql = mysqli_query($link,"a sql query");
    $i = 1;
    while ($donnees = mysqli_fetch_array($sql)){

        ?>
        <div class="block-car">
        <input type="checkbox" id="deleteCarCheckbox<?php echo $i; ?>" name="deleteCar" style="float:right">
        <script type="text/javascript">
            HideCheckbox(<?php echo $i; ?>);
        </script>



        <?php
        $i++;
    }
    catch(Exception $e){die('Erreur : '.$e->getMessage());}
}
?>

But if you just want to hide the checkbox remove your javascripts and do this: `` — aceraven777, Dec 29 '15 at 04:22
Thank you so much for the trick, and for the easy way to do it as well... I didn't know that it can be done using CSS. — Alladin, Dec 29 '15 at 04:29

score 1 · Answer 2 · answered Dec 29 '15 at 04:16

This is because all your checkbox elements have the same id, and your javascript code only sets the display of the first occurrence, and since all your checkboxes have the same id, then it will only hide the first checkbox. Instead, make every checkbox have a unique id.

score 0 · Answer 3 · edited May 23 '17 at 12:31

HideCheckbox() is running multiple times, the issue is that is always hiding deleteCarCheckbox To confirm that the loop is actually working try logging things onto the console and you will see when it gets called.

function HideCheckbox() {
    document.getElementById("deleteCarCheckbox").style.display = "none";
    console.log('HideCheckbox was called');
}

Also, the id attribute always needs to be unique. See here: Does ID have to be unique in the whole page?

why Javascript function executes only once inside a php loop?

3 Answers3