/    Sign up×
Community /Pin to ProfileBookmark

Validate only displayed select

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>

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@KravvitzOct 25.2005 — Instead of d.Role.value you need to use d.Role[0].value, d.Role[1].value, etc.

It might be easier to access them via their IDs.

document.getElementById('D100').value
Copy linkTweet thisAlerts:
@LisaeauthorOct 26.2005 — I tried that and got an "Object doesn't support this property or method" on the if statement.
Copy linkTweet thisAlerts:
@KravvitzOct 27.2005 — Does this work?
document.getElementById('D100').options[document.getElementById('D100').selectedIndex].value
×

Success!

Help @Lisae spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...