asked on

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>

dakyd

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">

SOLUTION

dakyd

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

devic

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dakyd

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?

devic

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.

blue44

ASKER

Thanks everyone. You solved a big issue for me!!

devic

you welcome!

blue44

ASKER

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!!

devic

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>

blue44

ASKER

That works great, devic! Thanks!!!

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

devic

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>

blue44

ASKER

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";
      }
}

devic

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>

blue44

ASKER

Arghhhh....but at least that makes sense.

Thanks agian, devic!!