AGDeacon
asked on
Display Drop Down Field Based on Select - Drop Down Value
I'm trying to set up a form element that makes two drop down menus accessible if specific values are selected in the "Profession" field. There will be five values that will make the primary and secondary fields available so I need to know how to make this available to multiple values in the drop down menu. Below is what I have so far.
<html>
<head>
<script type="text/javascript">
function changeOpt(theForm){
document.getElementById('row1').style.display=(theForm.type_id.options[theForm.type_id.selectedIndex].value=="ccc")? 'block':'none'
}
window.onload=function() {
changeOpt(document.forms[0]);
}
</script>
</head>
<body>
<form>
<P>
<select name="type_id" onChange="changeOpt(this.form)">
<option value="">Click to Select</option>
<option value="aaa">Job One
<option value="bbb">Job Two
<option value="ccc">Job Three
</select>
<table>
<tr>
<td>
<P>
</td>
</tr>
<!-- I want this whole row below to hide or view based on selection -->
<tr id="row1" style="display:none">
<td>
<P>
Primary Specialty: <select name="primary_specialty">
<option value="RN">Registered Nurse</option><option value="LPN">Licensed Practioner Nurse</option>
</select>
<br><br>
Secondary Specialty:<select name="secondary_specialty">
<option value="RN">Registered Nurse</option><option value="LPN">Licensed Practioner Nurse</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I realize there is quite a few lines of code. Line 518 is where the problematic fields are.
Thanks in advance.
Thanks in advance.
problem is with display:block, this changes the formatting of the row. Change this to display:table-row;
ASKER
I'm not seeing where display: block is coming into play. Can you give me a line number?
Try this change. its in your scripts. Use auto instead of the table-row, this should work better.
function changeOpt(theForm){
document.getElementById('row1').style.display=(arrayContains(opVals, theForm.Profession.options[theForm.Profession.selectedIndex].value))? 'block':'none'
}
to this
function changeOpt(theForm){
document.getElementById('row1').style.display=(arrayContains(opVals, theForm.Profession.options[theForm.Profession.selectedIndex].value))? 'auto':'none'
}
ASKER
Now the secondary fields don't even show up when I change the lines of script out. Did it work locally when you changed those lines?
interesting. auto worked when directly in the code, but doesnt work when called by javascript. looks like using table-row did work properly.
function changeOpt(theForm){
document.getElementById('row1').style.display=(arrayContains(opVals, theForm.Profession.options[theForm.Profession.selectedIndex].value))? 'table-row':'none'
}
ASKER
That works great, thanks.
ASKER
http://drawninwardmedia.com/nursecore/apply.php
Open in new window