CODEWITHSUNDEEP
phpjavascriptinputtextbox
vinz
vinz

Reputation: 348

Hide text input field on page load?

it's should be something really simple if its possible. anyway of doing so? can't seem to find it online.

i have a set of checkboxes and textboxes beside it. i only want the textboxes to appear if i check it. my ids are dynamic using php so i cant use javascript out of the loop.

the code below is to test if it works to hide. i am able to hide on click but iam hoping to do the other way round.

while($row = mysql_fetch_array($result)){
                echo "<tr>";
                echo "<td><input name='CBox $TBCounter' type=\"checkbox\" value=\"{$row['type']}\" onclick=\"document.getElementById('TBox $TBCounter').style.visibility='hidden';\"/></td>";
                echo "<td>" . $row['type'] . "</td>
                <td><input type=\"text\" name=\"mytext\" id=\"TBox $TBCounter\"></td><br />
                            </tr>";
                $TBCounter++;
            }

Upvotes: 1

Views: 3710

Answers (2)

Brenton Alker
Brenton Alker

Reputation: 9072

There are probably better (read: less intrusive) ways, but the simplest is probably to set the visibility of the element to hidden and change your Javascript to make it visible.

So, add style="visibility:hidden;" to the textbox element and change the javascript to set .style.visibility = 'visible'

Editing your code, that would be:

while($row = mysql_fetch_array($result)){
    echo "<tr>";
    echo "<td><input name='CBox $TBCounter' type=\"checkbox\" value=\"{$row['type']}\" onclick=\"document.getElementById('TBox $TBCounter').style.visibility='visible';\"/></td>";
    echo "<td>" . $row['type'] . "</td>
    <td><input type=\"text\" name=\"mytext\" id=\"TBox $TBCounter\" style=\"visibility:hidden\"></td><br />
                </tr>";
    $TBCounter++;
}

As per Joe's comment, this will not work for users with javascript disabled as the field if hidden when the page loads. One way around this is to set the field invisible in javascript by outputting an inline script tag.

while($row = mysql_fetch_array($result)){
    echo "<tr>";
    echo "<td><input name='CBox $TBCounter' type=\"checkbox\" value=\"{$row['type']}\" onclick=\"document.getElementById('TBox $TBCounter').style.visibility='visible';\"/></td>";
    echo "<td>" . $row['type'] . "</td>
    <td><input type=\"text\" name=\"mytext\" id=\"TBox $TBCounter\"></td><br />
                </tr>
    <script>document.getElementById('TBox $TBCounter').style.visibility='hidden';</script>";
    $TBCounter++;
}

A third (better) alternative could be to set a class for the textboxes and use javascript to hide all elements with that class on page load.

Upvotes: 1

Joe
Joe

Reputation: 15802

You can use Javascript's window.onload to make something run every time the page loads.

Before your loop...

$elementsToHide = array();

During your loop, put this

$elementsToHide[] = $TBCounter;

Then make your script (after the loop) look like this

<script type="text/javascript">
    window.onload = function ()
    {
        <?php foreach ($elementsToHide AS $TBCounter): ?>
        document.getElementById('TBox <?php echo $TBCounter ?>').style.visibility = 'hidden';
        <?php endforeach ?>
    }
</script>

Upvotes: 1

Related Questions