PDA

Click to See Complete Forum and Search --> : uncheck and hide? DHTML help

JB1981
03-03-2006, 02:35 PM
I've got some code to use checkboxes to make certain parts of a form apear, but I need to be able to hide those sections when the option is unchecked after it was checked. Im sure im 90% of the way there, but cant figure out the right way to do it.

Thanks for the help.

Example (http://www.allyvideo.com/testdm.htm)

<html><head><title></title>
<script type="text/javascript">
<!--

function changeDiv(the_div,the_change)
{
var the_style = getStyleObject(the_div);
if (the_style != false)
{
the_style.display = the_change;
}

}

function hideAll()
{
changeDiv("formsec1","none");
changeDiv("formsec2","none");
changeDiv("formsec3","none");
}

function getStyleObject(objectId) {
if (document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId).style;
} else if (document.all && document.all(objectId)) {
return document.all(objectId).style;
} else {
return false;
}
}
// -->
</script>
</head>
<body>
<form name="the_form">
<h1>Please choose and fill out the following forms </h1>
<input type="checkbox" name="pet"
onClick="changeDiv('formsec1','block');">Fillout Section 1
<input type="checkbox" name="pet"
onClick="changeDiv('formsec2','block');">Fillout Section 2
<input type="checkbox" name="pet"
onClick="changeDiv('formsec3','block');">Fillout Section 3

<p>
<div id="formsec1" style="margin-left:30px;display:none">
FORM SECTION #1
</div>

<div id="formsec2" style="margin-left:30px;display:none;">
FORM SECTION #2
</div>

<div id="formsec3" style="margin-left:30px;display:none;">

FORM SECTION #3
</div>
</body>
</html>
the tree
03-03-2006, 03:22 PM
Here's one way:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Formtastic</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.show{display:block;}
.dontshow{display: none;}
//-->
</style>
<script type="text/javascript">
<!--

function hideall(){
ul = document.getElementsByTagName('div');
for(n=0; n<ul.length; n++) {
ul[n].className="dontshow";
}
}
// if statements change 'show' for 'dontshow' and vice versa
function change(thing){
if (document.getElementById(thing).className=="show")
{document.getElementById(thing).className="dontshow";}
else{document.getElementById(thing).className="show";}
}
//-->
</script>
</head>
<body onload="hideall();">
<h1>Formtastica!</h1>
<form id="" action="" method="">
<input type="checkbox" id="something" onclick="change('uno');"><label for="something">something</label>
<input type="checkbox" id="utterly" onclick="change('dos');"><label for="utterly">utterly</label>
<input type="checkbox" id="amazing" onclick="change('tres');"><label for="amazing">amazing</label>
<div id="uno">
something
</div>
<div id="dos">
utterly
</div>
<div id="tres">
amazing
</div>
</form>
</body>
</html>
JB1981
03-03-2006, 05:41 PM
you ROCK \m/ (>.<) \m/
JB1981
03-03-2006, 06:23 PM
~Usability Report~

Incase someone else wants to use this script here are a couple of tips so it goes smoothly.

IE for PC : if you click on and off too quickly the check boxes will be reversed. (click on & off before the DIV loads and the check box will be on with no content, and off with content). Not sure what do do about that, just something to keep in mind.

IE for PC (again, MS= teh suck): You can't name the <input id=""> and the <div id=""> the same thing or the formatting will jump when checked then the box will disappear when unchecked.

example (wont work):

<input type="checkbox" id="checkbox1" onclick="change('checkbox1');"><label for="checkbox1">Kiteboard DVDs</label>

<div id="checkbox1">
something
</div>

Example (works):

<input type="checkbox" id="checkbox1" onclick="change('cb1');"><label for="checkbox1">Kiteboard DVDs</label>

<div id="cb1">
something
</div>

JB
the tree
03-03-2006, 07:20 PM
IE for PC : if you click on and off too quickly the check boxes will be reversed. (click on & off before the DIV loads and the check box will be on with no content, and off with content). Not sure what do do about that, just something to keep in mind.Maybe put in a button to reset the form which also calls the hideall(); function.

IE for PC (again, MS= teh suck): You can't name the <input id=""> and the <div id=""> the same thing or the formatting will jump when checked then the box will disappear when unchecked.It is incorrect to re-use IDs anyway.
JB1981
03-03-2006, 07:56 PM
Maybe put in a button to reset the form which also calls the hideall(); function.

It is incorrect to re-use IDs anyway.


1) Good idea I'll do that.
2) you're right, but I didnt notice I named 2 different things the same till i was beating my head against the monitor.

JB