I have gotten this to more than once before but today it just does not want to work for me ...
Here is the code
I am trying to apply a very basic principle, hide and/or display a row based on drop down list selection. I have an onChange in the select list which calls JS function ChangeEntityType. The ChangeEntityType function checks for value selected and it applies properties to elements.
The div will no hide even if I used style="display:none". If I changed the style.display properties for the element theRow, the row hides but, if the property is changed to show it again, the entire content is pushed to the right while the "hidden/shown" row is on the left.
I have looked at this code for hours and cannot put my finger on the root cause of my problem. As usual, your help will be appreciated.
Regards,
Jose
Here is the code
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Show and Hide</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
function ChgFocus(NewFocus) {
document.getElementById('hideFocus').value=NewFocus;
}
function ChangeEntityType(it) {
document.getElementById('person_to_serve').disabled = false; document.getElementById('title').disabled = false;
document.getElementById('hiddenRow').style.display='block';
if (it == "I") {
document.getElementById('hiddenRow').style.display='none';
document.getElementById('person_to_serve').disabled = true; document.getElementById('person_to_serve').value = ''; document.getElementById('title').value = ''; document.getElementById('title').disabled = true; }
if (it == "U") {
document.getElementById('hiddenRow').style.display='none';
document.getElementById('person_to_serve').disabled = true; document.getElementById('person_to_serve').value = ''; document.getElementById('title').value = ''; document.getElementById('title').disabled = true; }
if (it == "M" || it == "W") {
document.getElementById('title').disabled = true;
document.getElementById('title').value = ''; }
}
function CheckEntityType() {
var it = document.getElementById('entity_code').value;
if (it == '') { // alert('Please select an entity type!');
document.getElementById('person_to_serve').disabled = true;
document.getElementById('title').disabled = true; }
}
</script>
</head>
<body>
<table>
<tr>
<td align='right' valign='top'>Entity Type</td>
<td COLSPAN='2'>
<SELECT NAME='entity_code' id='entity_code' onChange='ChangeEntityType(this.value)'>
<OPTION VALUE=''> </OPTION>
<option value='I'>Individual</OPTION>
<option value='C'>Corporation (416.10)</OPTION>
<option value='D'>Defunct Corporation (416.20)</OPTION>
<option value='J'>Joint Stock (416.30)</OPTION>
<option value='A'>Association or Partnership (416.40)</OPTION>
<option value='P'>Public Entity (416.50)</OPTION>
<option value='B'>Business organization Form Unknown (415.95)</OPTION>
<option value='M'>Minor (416.60)</OPTION>
<option value='W'>Ward or Conservatee (416.70)</OPTION>
<option value='U'>Occupant (415.46)</OPTION>
<option value='O'>Other</OPTION>
</SELECT>
<br>
<i><font color='red' size='-2'>(List exactly as to appear on Proof of Service)</i>
</td>
</tr>
<tr>
<td valign='top' align='right'>
Servee:<br><font size='-2' color='red'><i>max length is 159 characters</i>
</td>
<td colspan='2'>
<textarea name='name_to_serve' cols=80 rows=2 class='body' wrap=hard>name_to_serve</textarea>
</td>
</tr>
<div id='hiddenRow'>
<tr id='theRow'>
<td valign='top' align='right'>Person to Serve:</td>
<td colspan='2'>
<table width='100%' border='0' cellpadding='0' cellspacing='0'>
<tr>
<td>
<INPUT name="person_to_serve" id="person_to_serve" type="text" size="30" maxlength="30" value="person_to_serve" onFocus="window.status=''; CheckEntityType();" onMouseOver='CheckEntityType();'>
</td>
<td align='right'>Title:</td>
<td>
<SELECT NAME='title' id='title' onMouseOver='CheckEntityType();' onFocus="CheckEntityType();">
<OPTION SELECTED value="title">title</OPTION>
<OPTION VALUE=''> </OPTION>
<option value='HEAD OF CORP./ENTITY'>HEAD OF CORP./ENTITY</OPTION>
<option value='VICE PRESIDENT OF CORP./ENTITY'>VICE PRESIDENT OF CORP./ENTITY</OPTION>
<option value='SECRETARY OF CORP./ENTITY'>SECRETARY OF CORP./ENTITY</OPTION>
<option value='ASSISTANT SECRETARY'>ASSISTANT SECRETARY</OPTION>
<option value='TREASURER'>TREASURER</OPTION>
<option value='ASSISTANT TREASURER'>ASSISTANT TREASURER</OPTION>
<option value='GENERAL MANAGER'>GENERAL MANAGER</OPTION>
<option value='REGISTERED AGENT FOR SERVICE OF PROCESS'>REGISTERED AGENT FOR SERVICE OF PROCESS</OPTION>
</SELECT>
</td>
</tr>
</table>
</td>
</tr></div>
<tr>
<td>ROW 1 COL1</td>
<td>ROW 1 COL2</td>
<td>ROW 1 COL3</td>
</tr>
<tr>
<td>ROW 2 COL1</td>
<td>ROW 2 COL2</td>
<td>ROW 2 COL3</td>
</tr>
<tr>
<td>ROW 3 COL1</td>
<td>ROW 3 COL2</td>
<td>ROW 3 COL3</td>
</tr>
<tr>
<td>ROW 4 COL1</td>
<td>ROW 4 COL2</td>
<td>ROW 4 COL3</td>
</tr>
</table>
</body>
</html>I am trying to apply a very basic principle, hide and/or display a row based on drop down list selection. I have an onChange in the select list which calls JS function ChangeEntityType. The ChangeEntityType function checks for value selected and it applies properties to elements.
The div will no hide even if I used style="display:none". If I changed the style.display properties for the element theRow, the row hides but, if the property is changed to show it again, the entire content is pushed to the right while the "hidden/shown" row is on the left.
I have looked at this code for hours and cannot put my finger on the root cause of my problem. As usual, your help will be appreciated.
Regards,
Jose
