Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 1209

Sep 1st, 2009

Hide fields depending on selection

Expand Post »

In the following code I am attempting to get certain fields to only appear if the user Selects dependent else those fields should be hidden.
Please tell me what I have done wrong?

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Display and Hide</title>
<script language="JavaScript">
  function showhidefield()
  {
    if (document.HelpAdd.RecordType.value == "Parent")
    {
      document.getElementById("hideablearea").style.visibility = "hidden";
    }
    else
    {
      document.getElementById("hideablearea").style.visibility = "visible";
    }
  }
</script>
 
</head>
<body>
<form name='HelpAdd' action='nextpage.asp'>
<table align="center" border="3" cellspacing="0" cellpadding="3">
<tr><td>Record Type:</td>
<td><select id="RecordType" name="RecordType" onchange=showhidefield()>
<option value='0'>Parent</option>
<option value='1'>Dependant</option><br/>
<tr><td>Topic Title:</td>
<td><input type="text" name="TopicName" ID="TopicName" maxlength="25"></td></tr>
 
<div id='hideablearea' style='visibility:hidden;'>
<tr><td>Parent:</td>
<td><select name="Parent">
<input type="text" name="ParentID" ID="ParentID" maxlength="25"></td></tr>
<tr><td>Topic Body:</td>
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $MaxFileSize ?>" />
<td><input id="helpfile" name="helpfile" type="file" /></td></tr>
</div>
<tr><td colspan="2" align="center">
<input type="submit" name="submit" value="Submit">
<a href="/help.php"><button>Back</a>
</td></tr>
<tr><td colspan="2" align="center">
<?php echo $Message ?>
</td></tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Display and Hide</title>
<script language="JavaScript">
  function showhidefield()
  {
    if (document.HelpAdd.RecordType.value == "Parent")
    {
      document.getElementById("hideablearea").style.visibility = "hidden";
    }
    else
    {
      document.getElementById("hideablearea").style.visibility = "visible";
    }
  }
</script>

</head>
<body>
<form name='HelpAdd' action='nextpage.asp'>
<table align="center" border="3" cellspacing="0" cellpadding="3">
<tr><td>Record Type:</td>
<td><select id="RecordType" name="RecordType" onchange=showhidefield()>
<option value='0'>Parent</option>
<option value='1'>Dependant</option><br/>
<tr><td>Topic Title:</td>
<td><input type="text" name="TopicName" ID="TopicName" maxlength="25"></td></tr>

<div id='hideablearea' style='visibility:hidden;'>
<tr><td>Parent:</td>
<td><select name="Parent">
<input type="text" name="ParentID" ID="ParentID" maxlength="25"></td></tr>
<tr><td>Topic Body:</td>
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $MaxFileSize ?>" />
<td><input id="helpfile" name="helpfile" type="file" /></td></tr>
</div>
<tr><td colspan="2" align="center">
<input type="submit" name="submit" value="Submit">
<a href="/help.php"><button>Back</a>
</td></tr>
<tr><td colspan="2" align="center">
<?php echo $Message ?>
</td></tr>
</table>
</form>
</body>
</html>

Similar Threads

Save form values - show/hide divs depending on values in JavaScript / DHTML / AJAX
how to populate a cfselect box depending upon the selection on raido button in ColdFusion
hide/unhide fields depending upon other fields. in JavaScript / DHTML / AJAX
Calling a Javascript Function in InnerHTML in JavaScript / DHTML / AJAX
populating dropdownlist based on gridview selection in ASP.NET

stockton

Reputation Points: 20

Solved Threads: 0

Light Poster

Offline

32 posts
since Jul 2008

Permalink

Sep 1st, 2009

Re: Hide fields depending on selection

Stockton,

You can't use <div> like that to segment part(s) of a table.

Use <tbody> instead. You may have as many <tbody>s as you like within a table, each containing any number of <tr>s , each containing any number of <td>s .

<td>s may contain <div>s but do not generally need to as each <td> is directly addressable by giving it an id.

To hide/show a <tbody> with JavaScript, use:

javascript Syntax (Toggle Plain Text)
tttt.style.display = 'none';
tttt.style.display = '';
tttt.style.display = 'none';
tttt.style.display = '';

where tttt is a reference to a particular <tbody> obtained (for example) with document.getElementById(...) .

Last edited by Airshow; Sep 1st, 2009 at 7:15 pm.

Airshow

Sponsor

Reputation Points: 302

Solved Threads: 358

WiFi Lounge Lizard

Offline

2,524 posts
since Apr 2009

Permalink

Sep 2nd, 2009

Re: Hide fields depending on selection

Thank you for your suggestion and now I almost have it the way I want but ......
Initial display is fine and if the user switches from "Parent" to "Dependent" the additional fields do display as expected but if they then switch from "Dependent" to "Parent" the additional fields do not disappear.
BTW The code I am working on can be seen at http://www.stockton.co.za/HelpTest.php
Obviously I am missing something, but what ?

stockton

Reputation Points: 20

Solved Threads: 0

Light Poster

Offline

32 posts
since Jul 2008

Permalink

Sep 2nd, 2009

Re: Hide fields depending on selection

Stockton,

That's because the value of the selected option is detemined by its value attribute (0|1) not its innerHTML property (Parent|Dependant).

You will find the following code more reliable cross-browser. It is also reusable in that it takes arguments rather than relying on hard-code.

javascript Syntax (Toggle Plain Text)
function showhidefield(menu, elId){
	var el = document.getElementById(elId);
	if(el){ el.style.display = (menu[menu.selectedIndex].value == '0') ? 'none' : ''; }
}
function showhidefield(menu, elId){
	var el = document.getElementById(elId);
	if(el){ el.style.display = (menu[menu.selectedIndex].value == '0') ? 'none' : ''; }
}

HTML Syntax (Toggle Plain Text)
<select id="RecordType" name="RecordType" onchange="showhidefield(this, 'hideablearea')">
<option selected value="0">Parent</option>
<option value="1">Dependant</option>
</select>
<select id="RecordType" name="RecordType" onchange="showhidefield(this, 'hideablearea')">
<option selected value="0">Parent</option>
<option value="1">Dependant</option>
</select>

I notice you are using DOCTYPE XHTML strict which means that, if you want the page to validate, all HTML tags should balance (or end in />), all tagnames and attributes should be lower case, and (iirc) attribute values should be in double quotes.

Airshow

Last edited by Airshow; Sep 2nd, 2009 at 1:27 pm.

Airshow

Sponsor

Reputation Points: 302

Solved Threads: 358

WiFi Lounge Lizard

Offline

2,524 posts
since Apr 2009

Permalink

Sep 3rd, 2009

Re: Hide fields depending on selection

Excellent. Just what I needed. Thank you.

stockton

Reputation Points: 20

Solved Threads: 0

Light Poster

Offline

32 posts
since Jul 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Embid php to javascript

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Trim Function

DaniWeb Message

Cancel Changes

User Name
Password