Conditional Display of Form Fields

**kuau** · 07-23-2008, 12:19 AM

I am creating a data entry form with a drop-down list of locations from which to choose. I have a checkbox next to "Please add my location to the list," in case the desired location is not on the list.

I would like the fields for adding the new location to be visible only when someone checks the box. So far nothing happens when they check the box - the fields do not show up. What am I missing? Thanks, e

Code:

<?php if(isset($_POST['addnewloc'])) { ?>
    <div id="newloc">
      <p><label for="location">New Location:</label><input type="text" name="location" size="60"></p>
      <p><label for="address">Address:</label><input type="text" name="address" size="40"></p>
      <p><label for="city">City:</label><input type="text" name="city" size="40"></p>
      <p><label for="zip">Zip Code:</label><input type="text" name="zip" size="12"></p>
   </div>
<?php } ?>

**rangana** · 07-23-2008, 12:45 AM

What's the identity of your checkbox? Try to give it an id of trig (as of now), and have this script:

Code:

<script type="text/javascript">
window.onload=function()
{
var loc=document.getElementById('newloc'), // assign the element having an ID of newloc to loc var.
trig=document.getElementById('trig'); // get the ID of checkbox
loc.style.display='none';
trig.onclick=function()
{document.getElementById('newloc').style.display=(this.checked!=true)?'none':'';}}
</script>

If you've got an id of the checkbox already, then replace the highlighted with what you have.

See if it helps.

**kuau** · 07-23-2008, 01:01 AM

Do I replace every instance of trig? This is what I tried, but I'm not sure where to put it. I got the message "Error on page." Thanks so much.

Code:

<p>Please add my location to the list: <input type="checkbox" id="addnewloc" name="addnewloc" value="Y" <?php echo ( ! empty ( $addnewloc ) ? "checked" : "" ); ?> ">
<script type="text/javascript">
window.onload=function()
{
var loc=document.getElementById('newloc'), // assign the element having an ID of newloc to loc var.
addnewloc=document.getElementById('addnewloc'); // get the ID of checkbox
loc.style.display='none';
addnewloc.onclick=function()
{document.getElementById('newloc').style.display=(this.checked!=true)?'none':'';}}
</script>      
      
<?php if(isset($_POST['addnewloc'])) { ?>

  <div id="newloc">
      <p><label for="location">New Location:</label><input type="text" name="location" size="60"></p>
      <p><label for="address">Address:</label><input type="text" name="address" size="40"></p>
      <p><label for="city">City:</label><input type="text" name="city" size="40"></p>
      <p><label for="zip">Zip Code:</label><input type="text" name="zip" size="12"></p>
   </div>
<?php } ?>

**rangana** · 07-23-2008, 01:21 AM

I can't reproduce the problem on my end, but maybe because I've used the onload event and you might have used it already.

With that said, have a try by having the highlighted instead of the script I've given:

Code:

<input type="checkbox" id="addnewloc" name="addnewloc" value="Y" <?php echo ( ! empty ( $addnewloc ) ? "checked" : "" ); ?> " onclick="document.getElementById('newloc').style.display=(this.checked!=true)?'none':'';">

**kuau** · 07-23-2008, 01:23 AM

I don't have a <body onload=??>. Do I need one?

**rangana** · 07-23-2008, 01:30 AM

No. The addition on the input element will (might) work.

Does it throws an error when added?

**kuau** · 07-23-2008, 01:31 AM

OK, I tried that and got the error "Object expected on line 393." There are only 244 lines in the code.

**rangana** · 07-23-2008, 01:35 AM

Could you show us your complete modification instead.

**kuau** · 07-23-2008, 01:35 AM

I have commented out a section of garbage code in the file while I am working on it -- could this be conflicting? Thanks for helping me.

**rangana** · 07-23-2008, 01:45 AM

Thanks for the link. Together with the link is a vivid reason of the error.

You don't have an element having an id of newloc.

Thread: Conditional Display of Form Fields

Thread Tools

Search Thread

Conditional Display of Form Fields

The Following User Says Thank You to rangana For This Useful Post:

The Following User Says Thank You to rangana For This Useful Post:

The Following User Says Thank You to rangana For This Useful Post:

The Following User Says Thank You to rangana For This Useful Post:

The Following User Says Thank You to rangana For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions