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

Famous hide/show fields onChange problem

Hello and thank you for looking.
All I need is a checkbox, which displays/shows a text field when it is clicked.
There is a lot of info out there but for some reason I cannot get it to work, though I feel I am very close:

<script language="javascript" type="text/javascript">
function chkCheck()
{
if (document.form1.text.style.visibility='hidden';)
{
document.form1.text1.style.visibility='visible'; // change back to visible
document.form1.text1.focus()
//document.form1.text1.value="";
}
else
{
document.form1.text1.style.visibility='hidden'; // change back to visible
document.form1.text1.value='';
}
}
</script>

<form name="form1" method="post" action="">
  <input type="checkbox" name="checkbox1" id="chk" onChange="chkCheck();"><br>
<input type="text" name="text1" id="chk">
</form>

THANK YOU so much.
0
Vadymus
Asked:
Vadymus
  • 6
1 Solution
 
knightEknightCommented:
<script language="javascript" type="text/javascript">
function chkCheck(fChecked)
{
   document.getElementById("chk").style.visibility = fChecked ? "" : "hidden";
}
</script>

<form name="form1" method="post" action="">
  <input type="checkbox" name="checkbox1" id="chk" onChange="chkCheck(this.checked);"><br>
<input type="text" name="text1" id="chk">
</form>
0
 
knightEknightCommented:
ooops ...



<html>
<head>
<script language="javascript" type="text/javascript">
function chkCheck(fChecked)
{
   document.getElementById("txt").style.visibility = fChecked ? "" : "hidden";
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<input type="checkbox" name="checkbox1" id="chk" onclick="chkCheck(this.checked);" /><br>
<input type="text" name="text1" id="txt" style="visibility:hidden;" />
</form>
</body>
</html>
0
 
knightEknightCommented:
in my first post I noticed that you had the same id for both the checkbox and the textbox.  When I changed the textbox id to "txt" it worked.  :)
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
knightEknightCommented:
oh!  and also change "onchange" to "onclick"
0
 
knightEknightCommented:
the only other suggestion I would make is to make the ids and the names synonymous, e.g. name="text1" id="text1" ... and change the function accordingly.
0
 
VadymusAuthor Commented:
I also added  onLoad="javascript:document.form1.text1.style.visibility='hidden'" to the body to make hidden when loaded.
It works great! thanks.

Two last things:
1. If you could just help me understand how this works:
function chkCheck(fChecked)
{
   document.getElementById("txt").style.visibility = fChecked ? "" : "hidden";
}
2. Do I have to include the above function between the <head></head>? If I have ASP page, can I put the function right above the form, for instance?

Yo don't have to answer this questions, but I'd be very grateful. Thank you so much.
0
 
knightEknightCommented:
I added  style="visibility:hidden;"  to make it hidden when the page is loaded :)

It is generally preferable to put you functions in the <head> section, but only by convention -- it is not necessary.  

In the function, fChecked is a flag that holds the true/false value of the checkbox (whether it is checked or not).

This line:

   document.getElementById("txt").style.visibility = fChecked ? "" : "hidden";

can be re-written in long form this way:

  if ( fChecked )
     document.getElementById("txt").style.visibility = "";
  else
     document.getElementById("txt").style.visibility = "hidden";

0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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