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"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<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";
      document.getElementById("hideablearea").style.visibility = "visible";

<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;'>
<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>
<tr><td colspan="2" align="center">
<input type="submit" name="submit" value="Submit">
<a href="/help.php"><button>Back</a>
<tr><td colspan="2" align="center">
<?php echo $Message ?>
7 Years
Discussion Span
Last Post by 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(...) .


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 ?



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>

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.


Votes + Comments
Excellent & it is solved.
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.