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_contracttype.options[document.theform.txt_contracttype.selectedIndex].value == 'Option 2')
      {      
            document.theform.reqd.style.visibility = '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!
LVL 3
rhoggrenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

cLFlaVACommented:
Try changing this:

document.theform.reqd.style.visibility = 'hidden';

To this:

document.getElementById('reqd').style.visibility = 'hidden';
0
cLFlaVACommented:
(And possibly changing this:

<span name="reqd">

To this:

<span id="reqd">

)
0
rhoggrenAuthor Commented:
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!
0
justinbilligCommented:
<!-- no points -->


it doenst like reqd as the id

<script language="javascript">

function ToggleVisibility( objTargetSelect )
{
      // Off?
      if( objTargetSelect.options[ objTargetSelect.selectedIndex ].value == "Option 2" )
      {
            // Visibility
            document.getElementById( "idSpan" ).style.visibility = "hidden"
      }
      else
      {
            document.getElementById( "idSpan" ).style.visibility = "";
      }
}

</script>
<html>
<body>
<table>
<tr>
<td width="47%" align="right">

              <span id="idSpan">
                    <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="ToggleVisibility( this );">
            <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>
</table>
</body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
rhoggrenAuthor Commented:
Well shoot you are right!!!

Thank you SO much!!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.