?
Solved

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

Posted on 2009-02-09
9
Medium Priority
?
319 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

0
Comment
Question by:beanbaguk2
  • 4
  • 4
9 Comments
 
LVL 13

Expert Comment

by:CRAK
ID: 23594522
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!
0
 

Author Comment

by:beanbaguk2
ID: 23595500
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.....
0
 
LVL 3

Expert Comment

by:SreejithG
ID: 23595831
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

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 3

Expert Comment

by:SreejithG
ID: 23595854
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

0
 
LVL 3

Expert Comment

by:SreejithG
ID: 23595859
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

0
 

Author Comment

by:beanbaguk2
ID: 23596260
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

0
 

Author Comment

by:beanbaguk2
ID: 23596314
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

0
 
LVL 3

Accepted Solution

by:
SreejithG earned 1000 total points
ID: 23596335
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

0
 

Author Closing Comment

by:beanbaguk2
ID: 31544668
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
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question