• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2200
  • Last Modified:

Need to hide and unhide text field with select box

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
blue44
Asked:
blue44
  • 6
  • 5
  • 3
2 Solutions
 
dakydCommented:
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
 
dakydCommented:
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
 
devicCommented:
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
Independent Software Vendors: 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!

 
dakydCommented:
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
 
devicCommented:
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
 
blue44Author Commented:
Thanks everyone.  You solved a big issue for me!!
0
 
devicCommented:
you welcome!
0
 
blue44Author Commented:
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
 
devicCommented:
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
 
blue44Author Commented:
That works great, devic! Thanks!!!

Is there a way to turn on/off visibility depending on the option value?
0
 
devicCommented:
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
 
blue44Author Commented:
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
 
devicCommented:
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
 
blue44Author Commented:
Arghhhh....but at least that makes sense.

Thanks agian, devic!!
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 6
  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now