Member Avatar for stockton

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?

<!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>
  • 2 Contributors
  • 4 Replies
  • 158 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by stockton
Member Avatar for Airshow

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:

tttt.style.display = 'none';
tttt.style.display = '';

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

Member Avatar for stockton

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 ?

Member Avatar for Airshow

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.

function showhidefield(menu, elId){
	var el = document.getElementById(elId);
	if(el){ el.style.display = (menu[menu.selectedIndex].value == '0') ? 'none' : ''; }
}
<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

commented: Excellent & it is solved. +2
Member Avatar for stockton

Excellent. Just what I needed. Thank you.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.