?
Solved

Need to hide and unhide text field with select box

Posted on 2004-08-12
14
Medium Priority
?
2,198 Views
Last Modified: 2008-02-01
Hi,

I have a select box that I'd like to enable a field to be visible or not.  Basically, when you select 'yes', it will display the input field.  If you select 'no', the field will go away.

My code is below.

Many thanks,
blue44


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<script language="JavaScript" type="text/JavaScript">
      function DisplayFields()
      {
             document.ApplyUpdate.WorkerDescription.style.visibility="hidden";
      }

</script>



</head>

<body>
<form action="ApplyHandler.htm" method="post" name="ApplyUpdate" >

<select name="Worker" onBlur="DisplayFields();">
      <option value="Yes" >Yes</option>
      <option value="No" >No</option>
</select>

<input style="VISIBILITY: visible" value="Good Worker" name="WorkerDescription" type="text" size="80" maxlength="80">

</form>
</body>
</html>
0
Comment
Question by:blue44
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 3
14 Comments
 
LVL 19

Expert Comment

by:dakyd
ID: 11786439
Give that a shot, that should show/hide your input box as necessary.

<select name="Worker" onChange="if (this.selectedIndex == 0) document.ApplyUpdate.WorkerDescription.style.display = ''; else  document.ApplyUpdate.WorkerDescription.style.display = 'none';">
     <option value="Yes" >Yes</option>
     <option value="No" >No</option>
</select>
<input value="Good Worker" name="WorkerDescription" type="text" size="80" maxlength="80">
0
 
LVL 19

Assisted Solution

by:dakyd
dakyd earned 500 total points
ID: 11786471
Oops, only copied & pasted part of it ... the whole page is here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<form action="ApplyHandler.htm" method="post" name="ApplyUpdate" >
<select name="Worker" onChange="if (this.selectedIndex == 0) document.ApplyUpdate.WorkerDescription.style.display = ''; else  document.ApplyUpdate.WorkerDescription.style.display = 'none';">
     <option value="Yes" >Yes</option>
     <option value="No" >No</option>
</select>
<input value="Good Worker" name="WorkerDescription" type="text" size="80" maxlength="80">
</form>
</body>
</html>
0
 
LVL 25

Accepted Solution

by:
devic earned 500 total points
ID: 11786520
with display=block/none the elements can jump ;)

----------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<script language="JavaScript" type="text/JavaScript">
    function DisplayFields(obj)
     {
          obj.form.WorkerDescription.style.visibility=obj.selectedIndex==0?"visible":"hidden";
     }

</script>



</head>

<body>
<form action="ApplyHandler.htm" method="post" name="ApplyUpdate" >

<select name="Worker" onchange="DisplayFields(this);">
    <option value="Yes" >Yes</option>
    <option value="No" >No</option>
</select>

<input value="Good Worker" name="WorkerDescription" type="text" size="80" maxlength="80">

</form>
</body>
</html>
0
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.

 
LVL 19

Expert Comment

by:dakyd
ID: 11786584
devic,
Won't using display='' fix that?  You don't make it a block-level element, so it'll simply restore itself in the flow of the document, no?
0
 
LVL 25

Expert Comment

by:devic
ID: 11786657
dakyd,
yes display='' is correct syntax, and works on non IE browsers too.

I wanted just notice the difference between display and visibility. And is that display:none treats it like it does not exist, so space is not reserved for it.  Visibility reserves the space for it, but just does not show it on the screen.
0
 

Author Comment

by:blue44
ID: 11786704
Thanks everyone.  You solved a big issue for me!!
0
 
LVL 25

Expert Comment

by:devic
ID: 11786761
you welcome!
0
 

Author Comment

by:blue44
ID: 11789758
One more question.  Can you modify the script so that depending on the value in the select box, the field will be either hidden or visible? Also, using <div>, I'd like to make the label for the select box also hidden or visible.

I'll away an extra 200 pts for this.

Thanks!!
0
 
LVL 25

Expert Comment

by:devic
ID: 11790629
here with div:
======================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<script language="JavaScript" type="text/JavaScript">
   function DisplayFields(obj)
     {
         document.getElementById("myDiv").style.visibility=obj.selectedIndex==0?"visible":"hidden";
     }

</script>



</head>

<body>
<form action="ApplyHandler.htm" method="post" name="ApplyUpdate" >

<select name="Worker" onchange="DisplayFields(this);">
   <option value="Yes" >Yes</option>
   <option value="No" >No</option>
</select>
<div id=myDiv>
asdfghjk
<input value="Good Worker" name="WorkerDescription" type="text" size="80" maxlength="80">
</div>
</form>
</body>
</html>
0
 

Author Comment

by:blue44
ID: 11794248
That works great, devic! Thanks!!!

Is there a way to turn on/off visibility depending on the option value?
0
 
LVL 25

Expert Comment

by:devic
ID: 11794282
hi blue44, of course yes ;)
===========================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<script language="JavaScript" type="text/JavaScript">
   function DisplayFields(obj)
     {
         document.getElementById("myDiv").style.visibility=obj.value=="Yes"?"visible":"hidden";
     }

</script>



</head>

<body>
<form action="ApplyHandler.htm" method="post" name="ApplyUpdate" >

<select name="Worker" onchange="DisplayFields(this);">
   <option value="Yes" >Yes</option>
   <option value="No" >No</option>
</select>
<div id=myDiv>
asdfghjk
<input value="Good Worker" name="WorkerDescription" type="text" size="80" maxlength="80">
</div>
</form>
</body>
</html>
0
 

Author Comment

by:blue44
ID: 11794390
That's incredible.  You are a JS Genius!!

Being the novice that I am, I tried to understand your funciton by writing out the code in long format.  I came up with the following, but it errors out.  What am I missing?:
function DisplayFields(obj)
{
     if (obj.value == "Yes")
         {
      document.getElementById("myDiv").style.visibility = "visible";
         else
      {
           document.getElementById("myDiv").style.visibility = "hidden";
      }
}
0
 
LVL 25

Expert Comment

by:devic
ID: 11794450
try to keep nice formating and then you will see syntax errors. You forgot  one "}"
====================================
<script language="JavaScript" type="text/JavaScript">
function DisplayFields(obj)
{
      if (obj.value == "Yes")
      {
            document.getElementById("myDiv").style.visibility = "visible";
      }
      else
      {
            document.getElementById("myDiv").style.visibility = "hidden";
      }
}
</script>
0
 

Author Comment

by:blue44
ID: 11794545
Arghhhh....but at least that makes sense.

Thanks agian, devic!!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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

770 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