Solved

Need to hide and unhide text field with select box

Posted on 2004-08-12
14
2,197 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 125 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 125 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
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

 
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

717 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