I have a form with numerous selects (name=”Role”) that are not displayed – chosing an option from another select (name=”Department”) determines which of the “Role” selects to display. I am trying to validate the “Role” select. How do I tell it to only look at the “Role” that is currently being displayed? Sample code below. I get errors even getting it to display the correct “Role” when I try to add “&& d.Role.value==’0′” to the if statement for IsEmpty17(elementId). What am I doing wrong?
<code>
<html>
<script type=”text/javascript” language=”javascript”>
//<![CDATA[
<!–
// Preview Role Listed
var prevRole = “”;
function showRole(currRole){
if (prevRole != “”){document.getElementById(prevRole).style.display=’none’}
if (currRole != 0)
{document.getElementById(currRole).style.display=’inline’;
document.getElementById(currRole).disabled = false;
prevRole=currRole}
}
function IsEmpty17(elementId)
{
d = document.NewUser;
if ( eval(“d.” + elementId + “.style.display”)==’inline’)
{alert(“Please select the new user’s role.n”);
d.Role.focus()}
}
//–>
//</XMLCDATA>
</script>
<body>
<form name=”NewUser”>
<select name=”Department” onChange=”showRole(this.value)”>
<option value=”0″ selected>Choose a Department</option>
<option value=”D000″>000 Training</option>
<option value=”D100″>100 CORPORATE – GENERAL</option>
</select>
<br>
<select name=”Role” id=”D000″ style=’display:none’ disabled>
<option value=”0″>Choose a Role</option>
<option value=”000020 Dreamweaver Training”>000020 Dreamweaver Training</option>
<option value=”000050 Developer Training”>000050 Developer Training</option>
</select>
<select name=”Role” id=”D100″ style=’display:none’ disabled>
<option value=”0″>Choose a Role</option>
<option value=”100001 President & CEO”>100001 President & CEO</option>
<option value=”100002 CEO Executive Assistant”>100002 CEO Executive Assistant</option>
</select>
<br>
<select name=”RoleListed” onfocusin=”IsEmpty17(Department.value)”>
<option value=”Listed”>Role Listed</option>
<option value=”Not Listed”>Role is Not Listed</option>
</select>
</form>
</body>
</html>
</code>