checkbox to hide certain form elements

zubz · Mar 29, 2005

Hi I have a form with a number of form fields. What I want is to have a checkbox in the form that when clicked on hides certain other form elements in the form?

I am new to javascript and am having some problems doing this? Can anyone help or has an example?

Thanks

klaforce · Mar 29, 2005

Hi, try the following as a start. Let me know if you have any questions.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<script>
function hideText()
{
var styleObject = getStyleObject('LayerMulSel');
if(styleObject) {

if(document.myForm.checkMe.checked)
styleObject.visibility = "hidden";
else
styleObject.visibility = "visible";

return true;
}
else
{
// we couldn't find the object, so we can't change its visibility
return false;
}
}

function getStyleObject(objectId) {
// checkW3C DOM, then MSIE 4, then NN 4.
//
if(document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId).style;
}
else if (document.all && document.all(objectId)) {
return document.all(objectId).style;
}
else if (document.layers && document.layers[objectId]) {
return document.layers[objectId];
} else {
return false;
}
}

</script>
</head>

<body>

<form name="myForm">
<div id="LayerMulSel">
<input type="text" name="hideMe" value="">
</div>

<input type="checkbox" name="checkMe" onChange="hideText();">

</form>
</body>
</html>

BabyJeffy · Mar 29, 2005

Another variation of the above code - using the display property instead of the visibility property:

Code:

<html>
<head>
<script type="text/javascript">
<!--
function showHide()
{
  var myObj = document.getElementById('showhidediv');
  myObj.style.display = myObj.style.display == 'none' ? 'block' : 'none';
}
//-->
</script>
</head>
<body onload="initChkBoxes()">
<form name="myForm">
<input type="checkbox" name="chk_1" onclick="showHide()" />Show/Hide<br />
<div id="showhidediv">
  This is some content that we can hide by clicking the checkbox above.
</div>
<input type="checkbox" name="chk_2" />Two<br />
<input type="checkbox" name="chk_3" />Three<br />
</form>
</body>
</html>

You can modify the function to use the visibility property (as klaforc does above):

Code:

function showHide()
{
  var myObj = document.getElementById('showhidediv');
  myObj.style.visibility = myObj.style.visibility == 'hidden' ? 'visible' : 'hidden';
}

The examples I have given will work fine in all the modern browsers.

Cheers,
Jeff

zubz · Mar 29, 2005

Thanks guys! Youv'e helped me out.

WildT · Mar 29, 2005

put this in header:

<script language="javascript">
function Check()
{
if(myBox.Checked)
{
Show("form1");
Hide("form2");
}
else
{
Show("form2");
Hide("form1");
}
}
function Show(indexId)
{
eval(indexId + ".style.display=''");
}
function Hide(indexId)
{
eval(indexId + ".style.display='none'");
}
</script>

--------------------------------------

and then lets supost your html looks like this:

<input type="checkbox" id="myBox" onclick="Check()">
<span id="form1">Form mode 1</span>
<span id="form2">Form mode 2</span>

--------------------------------------

so put the stuff you want to show up when the check box is on inside the first span tag.
put the stuff you want to show up when the check box is off inside the second span tag

BillyRayPreachersSon · Mar 29, 2005

I really would advise against the use of eval for this simple request. It has latency attached to its use, which can be avoided (or at least greatly reduced) with DOM methods as shown by klaforc and Jeff.

Realistically, there are now very few scenarios for which using eval is better than other methods available.

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

checkbox to hide certain form elements

zubz

Programmer

klaforce

Programmer

BabyJeffy

Programmer

zubz

Programmer

WildT

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor