rhoggren
asked on
Hiding HTML Text Based on Drop Down Selection
Hello Experts,
I've seen lots of answers on this, but I can't seem to get this working.
I've got a form where I have red asterisks (*) symbolizing what is a required field. On that form, if the user selects a certain option from a drop down menu, some of those asterisks should go away as those fields are not required.
Here's what I have:
function reqdshow()
{
if (document.theform.txt_cont racttype.o ptions[doc ument.thef orm.txt_co ntracttype .selectedI ndex].valu e == 'Option 2')
{
document.theform.reqd.styl e.visibili ty = 'hidden';
}
}
And in my HTML, I have the following:
(the form in question is FORM NAME="theform" ID="theform" for reference)
<tr>
<td width="47%" align="right">
<span name="reqd">
<b><font face="Verdana, Arial, Helvetica, sans-serif" size="3" color="#FF0033">*</font></ b>
</span>
<font size="2" face="Verdana, Arial, Helvetica, sans-serif"><b>Contract Type: </font></b>
</td>
<td width="53%<select name="txt_contracttype" OnChange="reqdshow;">
<option value=""> --- Please Select --- </option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select></td>
</tr>
So when "Option 2" is selected, I want to hide the asterisks I put in between the SPAN tags.
Does this make sense? I must be losing my mind on this or be making a really goofy mistake. Any help provided is GREATLY appreciated!
I've seen lots of answers on this, but I can't seem to get this working.
I've got a form where I have red asterisks (*) symbolizing what is a required field. On that form, if the user selects a certain option from a drop down menu, some of those asterisks should go away as those fields are not required.
Here's what I have:
function reqdshow()
{
if (document.theform.txt_cont
{
document.theform.reqd.styl
}
}
And in my HTML, I have the following:
(the form in question is FORM NAME="theform" ID="theform" for reference)
<tr>
<td width="47%" align="right">
<span name="reqd">
<b><font face="Verdana, Arial, Helvetica, sans-serif" size="3" color="#FF0033">*</font></
</span>
<font size="2" face="Verdana, Arial, Helvetica, sans-serif"><b>Contract Type: </font></b>
</td>
<td width="53%<select name="txt_contracttype" OnChange="reqdshow;">
<option value=""> --- Please Select --- </option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select></td>
</tr>
So when "Option 2" is selected, I want to hide the asterisks I put in between the SPAN tags.
Does this make sense? I must be losing my mind on this or be making a really goofy mistake. Any help provided is GREATLY appreciated!
(And possibly changing this:
<span name="reqd">
To this:
<span id="reqd">
)
<span name="reqd">
To this:
<span id="reqd">
)
ASKER
Nopers, it does the same thing which is nothing. :-(
I know the value is being selected properly because I added in an alert if the correct option was selected, and I got that alert when I selected the corresponding option..
I'm not sure what else I could be doing wrong on this... from the looks of everything (including what you just gave me) it should be working, and yet, it's not!
I know the value is being selected properly because I added in an alert if the correct option was selected, and I got that alert when I selected the corresponding option..
I'm not sure what else I could be doing wrong on this... from the looks of everything (including what you just gave me) it should be working, and yet, it's not!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Well shoot you are right!!!
Thank you SO much!!!
Thank you SO much!!!
document.theform.reqd.styl
To this:
document.getElementById('r