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());}
       }
?>

ID should be UNIQUE

Tushar
– Tushar

2015-12-29 04:13:11 +00:00
Commented Dec 29, 2015 at 4:13 — Tushar
– Tushar, Commented Dec 29, 2015 at 4:13

aceraven777 · Accepted Answer · 2015-12-29 04:16:44Z

1

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());}
}
?>

answered Dec 29, 2015 at 4:16

aceraven777

4,5864 gold badges39 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aceraven777 Over a year ago

But if you just want to hide the checkbox remove your javascripts and do this: <input type="checkbox" id="deleteCarCheckbox" name="deleteCar" style="float: right; display: none;">

Alladin Over a year ago

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.

kzhao14 · Accepted Answer · 2015-12-29 04:16:54Z

1

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.

answered Dec 29, 2015 at 4:16

kzhao14

2,66017 silver badges22 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:31:24Z

0

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?

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Dec 29, 2015 at 4:23

Alan Soto

92 bronze badges

Collectives™ on Stack Overflow

why Javascript function executes only once inside a php loop?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related