?
Solved

Hiding HTML Text Based on Drop Down Selection

Posted on 2004-11-10
5
Medium Priority
?
287 Views
Last Modified: 2012-06-21
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!
0
Comment
Question by:rhoggren
  • 2
  • 2
5 Comments
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12545892
Try changing this:

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

To this:

document.getElementById('reqd').style.visibility = 'hidden';
0
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12545897
(And possibly changing this:

<span name="reqd">

To this:

<span id="reqd">

)
0
 
LVL 3

Author Comment

by:rhoggren
ID: 12545995
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
 
LVL 15

Accepted Solution

by:
justinbillig earned 200 total points
ID: 12546573
<!-- 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
 
LVL 3

Author Comment

by:rhoggren
ID: 12546722
Well shoot you are right!!!

Thank you SO much!!!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question