Solved

Need to hide and unhide text field with select box

Posted on 2004-08-12
14
2,187 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
  • 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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Graphical performance problems on Raspbian OS 2 68
Safari SVG Image Problem 1 20
JavaScript error 1 33
Test ddwrt:UserLookup 1 22
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…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now