We help IT Professionals succeed at work.

How do I show and hide items within a form table when I set another form item to certain status?

Medium Priority
329 Views
Last Modified: 2013-11-19
I need a solution for a page I'm putting together. I have a form to add a record to a database, however not all the form fields are needed unless certain items are triggered.

For example, I need to collect information as to whether or not in my table if a guest is a child.

If the guest is a child, I'd like to show additional fields to be filled in. If the guest is not a child, then the child related fields are not shown.

The code shown, shows three rows on a table. If the first row question is answered "yes", the other two rows will be displayed otherwise they'll be hidden.

How do I go about implementing a script to deal with this?
<td>Is this guest a child?</td>
              <td><label>
                <select name="children" class="form_input" id="children">
                  <option selected="selected" value="no">no</option>
<option value="yes">yes</option>
                                                </select>
              </label></td>
            </tr>
            <tr>
              <td>How old is the child?</td>
              <td><select name="age" class="form_input" id="age">
                <option value="" <?php if (!(strcmp("", $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>Please Select</option>
                <option value="Under 1" <?php if (!(strcmp("Under 1", $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>Under 1</option>
                <option value="1" <?php if (!(strcmp(1, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>1</option>
                <option value="2" <?php if (!(strcmp(2, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>2</option>
                <option value="3" <?php if (!(strcmp(3, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>3</option>
                <option value="4" <?php if (!(strcmp(4, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>4</option>
                <option value="5" <?php if (!(strcmp(5, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>5</option>
                <option value="6" <?php if (!(strcmp(6, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>6</option>
                <option value="7" <?php if (!(strcmp(7, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>7</option>
                <option value="8" <?php if (!(strcmp(8, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>8</option>
                <option value="9" <?php if (!(strcmp(9, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>9</option>
                <option value="10" <?php if (!(strcmp(10, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>10</option>
                <option value="11" <?php if (!(strcmp(11, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>11</option>
                <option value="12" <?php if (!(strcmp(12, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>12</option>
              </select></td>
            </tr>
            <tr>
              <td>Is the child a boy or girl?</td>
              <td><select name="gender" class="form_input" id="gender">
                <option value="" <?php if (!(strcmp("", $row_edit_guest['child_gender']))) {echo "selected=\"selected\"";} ?>>Please select</option>
                <option value="Boy" <?php if (!(strcmp("Boy", $row_edit_guest['child_gender']))) {echo "selected=\"selected\"";} ?>>Boy</option>
                <option value="Girl" <?php if (!(strcmp("Girl", $row_edit_guest['child_gender']))) {echo "selected=\"selected\"";} ?>>Girl</option>
              </select></td>

Open in new window

Comment
Watch Question

CERTIFIED EXPERT

Commented:
You'll need javascript to make that work nicely.

First, apply unique id's to the related <tr>s and apply a style to them: "display:none". That should hide those rows. Don't use a stylesheet to atrchieve that, unless you like more trouble!

Second, use the age fields onChange event to get hold of  those rows, and set or reset the related <tr>s displays, eg:
document.forms[0].getElementById('rowid').style.display=''

Do consider if you need to reset field values (and set off new (un)hide-triggers) as well!

Author

Commented:
Hi Crak,

Thanks for the reply. The first part is quite straight forward and the rows are now hidden nicely, however I still can't work out what to code to bring them back with a function.

I'm not exactly a javascript coder so I'm struggling here!

Perhaps you could provide the necessary javascript and code to solve this issue?

Thanks.....
to hide
document.forms[0].getElementById('rowid').style.display=''none"

to display

document.forms[0].getElementById('rowid').style.display=''block"





function ShowNHide(varRowId){
      if(document.getElementById(varRowId).style.display = 'none')
      {
        document.getElementById(varRowId).style.display = 'block';
      }
      else if(document.getElementById(varRowId).style.display = 'block')
      {
        document.getElementById(varRowId).style.display = 'none';
      }
}

Open in new window

Opps!! Common mistake. Corrected one below
function ShowNHide(varRowId){
      if(document.getElementById(varRowId).style.display = 'none')
      {
        document.getElementById(varRowId).style.display = 'block';
      }
      else if(document.getElementById(varRowId).style.display = 'block')
      {
        document.getElementById(varRowId).style.display = 'none';
      }
}

Open in new window

hmm.. again posted wrong one
function ShowNHide(varRowId){
      if(document.getElementById(varRowId).style.display == 'none')
      {
        document.getElementById(varRowId).style.display = 'block';
      }
      else if(document.getElementById(varRowId).style.display == 'block')
      {
        document.getElementById(varRowId).style.display = 'none';
      }
}

Open in new window

Author

Commented:
Hi SreejithG.

Thanks for your efforts. Unfortunately I've had no joy with the code you posted. I've pasted my amended code using what you suggested below.

Perhaps I'm doing something wrong in my code???

Cheers,

BB
/* JavaScript Code */
 
<SCRIPT LANGUAGE="JavaScript">
function ShowNHide(varRowId){
      if(document.getElementById(varRowId).style.display == 'none')
      {
        document.getElementById(varRowId).style.display = 'block';
      }
      else if(document.getElementById(varRowId).style.display == 'block')
      {
        document.getElementById(varRowId).style.display = 'none';
      }
}
</SCRIPT>
 
 
/* Form code */
 
<select name="children" class="form_input" id="children">
                  <option selected="selected" value="no" onchange="document.forms[0].getElementById('rowid').style.display=''none">no</option>
<option value="yes" onchange="document.forms[0].getElementById('rowid').style.display=''block">yes</option>
                                                </select>
              </label></td>
            </tr>
            <tr id="rowid" style="display:none">         
              <td>How old is the child?</td>
              <td><select name="age" class="form_input" id="age">
                <option value="" <?php if (!(strcmp("", $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>Please Select</option>
                <option value="Under 1" <?php if (!(strcmp("Under 1", $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>Under 1</option>
                <option value="1" <?php if (!(strcmp(1, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>1</option>
                <option value="2" <?php if (!(strcmp(2, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>2</option>
                <option value="3" <?php if (!(strcmp(3, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>3</option>
                <option value="4" <?php if (!(strcmp(4, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>4</option>
                <option value="5" <?php if (!(strcmp(5, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>5</option>
                <option value="6" <?php if (!(strcmp(6, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>6</option>
                <option value="7" <?php if (!(strcmp(7, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>7</option>
                <option value="8" <?php if (!(strcmp(8, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>8</option>
                <option value="9" <?php if (!(strcmp(9, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>9</option>
                <option value="10" <?php if (!(strcmp(10, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>10</option>
                <option value="11" <?php if (!(strcmp(11, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>11</option>
                <option value="12" <?php if (!(strcmp(12, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>12</option>
              </select></td>
            <tr id="rowid" style="display:none">
              <td>Is the child a boy or girl?</td>
              <td><select name="gender" class="form_input" id="gender">
                <option value="" <?php if (!(strcmp("", $row_edit_guest['child_gender']))) {echo "selected=\"selected\"";} ?>>Please select</option>
                <option value="Boy" <?php if (!(strcmp("Boy", $row_edit_guest['child_gender']))) {echo "selected=\"selected\"";} ?>>Boy</option>
                <option value="Girl" <?php if (!(strcmp("Girl", $row_edit_guest['child_gender']))) {echo "selected=\"selected\"";} ?>>Girl</option>
              </select></td>
            </tr>

Open in new window

Author

Commented:
I'm not sure if I had a blonde moment there but I tried to use your JS function with the following code.

Unfortunately this didn't work either.....
<td><label>
                <select name="children" class="form_input" id="children">
                  <option selected="selected" value="no" onchange="ShowNHide(child_detail)">no</option>
<option value="yes" onchange="ShowNHide(child_detail)">yes</option>
                                                </select>
              </label></td>
            </tr>
            <tr id="child_detail" style="display:none">         
              <td>How old is the child?</td>
              <td><select name="age" class="form_input" id="age">
                <option value="" <?php if (!(strcmp("", $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>Please Select</option>
                <option value="Under 1" <?php if (!(strcmp("Under 1", $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>Under 1</option>
                <option value="1" <?php if (!(strcmp(1, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>1</option>
                <option value="2" <?php if (!(strcmp(2, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>2</option>
                <option value="3" <?php if (!(strcmp(3, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>3</option>
                <option value="4" <?php if (!(strcmp(4, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>4</option>
                <option value="5" <?php if (!(strcmp(5, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>5</option>
                <option value="6" <?php if (!(strcmp(6, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>6</option>
                <option value="7" <?php if (!(strcmp(7, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>7</option>
                <option value="8" <?php if (!(strcmp(8, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>8</option>
                <option value="9" <?php if (!(strcmp(9, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>9</option>
                <option value="10" <?php if (!(strcmp(10, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>10</option>
                <option value="11" <?php if (!(strcmp(11, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>11</option>
                <option value="12" <?php if (!(strcmp(12, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>12</option>
              </select></td>
            <tr id="child_detail" style="display:none">
              <td>Is the child a boy or girl?</td>
              <td><select name="gender" class="form_input" id="gender">
                <option value="" <?php if (!(strcmp("", $row_edit_guest['child_gender']))) {echo "selected=\"selected\"";} ?>>Please select</option>
                <option value="Boy" <?php if (!(strcmp("Boy", $row_edit_guest['child_gender']))) {echo "selected=\"selected\"";} ?>>Boy</option>
                <option value="Girl" <?php if (!(strcmp("Girl", $row_edit_guest['child_gender']))) {echo "selected=\"selected\"";} ?>>Girl</option>
              </select></td>
            </tr>

Open in new window

here is what you are looking for..
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
<!--
function children_onchange() 
{
	if(document.getElementById("children").value == "yes")
	{
	document.getElementById("rowid1").style.display = 'block';
	document.getElementById("rowid2").style.display = 'block';
	}
	else
	{
	document.getElementById("rowid1").style.display = 'none';
	document.getElementById("rowid2").style.display = 'none';
	}
}
 
//-->
</SCRIPT>
</HEAD>
<BODY>
 
<table>
 <tr>         
           <td>
<select name="children" class="form_input" id="children" LANGUAGE=javascript onchange="return children_onchange()">
   <option selected="selected" value="no" >no</option>
<option value="yes" >yes</option>
  </select>
              </label></td>
            </tr>
            <tr id="rowid1" style="display:none">         
              <td>How old is the child?</td>
              <td><select name="age" class="form_input" id="age">
                <option value="" <?php if (!(strcmp("", $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>Please Select</option>
                <option value="Under 1" <?php if (!(strcmp("Under 1", $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>Under 1</option>
                <option value="1" <?php if (!(strcmp(1, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>1</option>
                <option value="2" <?php if (!(strcmp(2, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>2</option>
                <option value="3" <?php if (!(strcmp(3, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>3</option>
                <option value="4" <?php if (!(strcmp(4, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>4</option>
                <option value="5" <?php if (!(strcmp(5, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>5</option>
                <option value="6" <?php if (!(strcmp(6, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>6</option>
                <option value="7" <?php if (!(strcmp(7, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>7</option>
                <option value="8" <?php if (!(strcmp(8, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>8</option>
                <option value="9" <?php if (!(strcmp(9, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>9</option>
                <option value="10" <?php if (!(strcmp(10, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>10</option>
                <option value="11" <?php if (!(strcmp(11, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>11</option>
                <option value="12" <?php if (!(strcmp(12, $row_edit_guest['child_age']))) {echo "selected=\"selected\"";} ?>>12</option>
              </select></td>
            <tr id="rowid2" style="display:none">
              <td>Is the child a boy or girl?</td>
              <td><select name="gender" class="form_input" id="gender">
                <option value="" <?php if (!(strcmp("", $row_edit_guest['child_gender']))) {echo "selected=\"selected\"";} ?>>Please select</option>
                <option value="Boy" <?php if (!(strcmp("Boy", $row_edit_guest['child_gender']))) {echo "selected=\"selected\"";} ?>>Boy</option>
                <option value="Girl" <?php if (!(strcmp("Girl", $row_edit_guest['child_gender']))) {echo "selected=\"selected\"";} ?>>Girl</option>
              </select></td>
            </tr>
</table>
 
 
</BODY>
</HTML>

Open in new window

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
Genius! Thanks!
That was driving me nuts. The table layout is now a little "off", but that's pretty simple to fix.

Thanks once again and thank you the other chap who tried to help me out too.

BB
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.