PDA

View Full Version : Cbox1 Cbox2-Visibility/hiding

vijk2001
09-19-2002, 08:09 PM
Hi,

This is my requirement that i am trying to accomplish.

I have TWO CHECKBOXES Cbox1 Cbox2.

When CBox 1 is checked, it results in a drop down box with 3 values VAL1,VAL2 and VAL3.else if unchecked Drop Down Box is hidden.

No functionality for the Cbox2.

How do i implement this functionality??

Regards
Vij
mordred
09-19-2002, 08:20 PM
I'll translate "results" to "appears", thus I can propose a DHTML solution:

Put the "resulting" select list into a div with an id like "aList" and position it somewhere in your form. Make it hidden through CSS visiblitiy, display, etc. Store the current visiblity value in a flag variable. Then use a tiny js statement in an eventhandler to display/toggle the list on clicking the checkbox. Sth like


if (flagVar == "hidden") {
flagVar = "visible";
} else {
flagVar = "hidden";
}

document.getElementById("aList").style.visibility = flagVar;


voilą!

Originally posted by vijk2001
No functionality for the Cbox2.


Hey, that's quite difficult, but I can come up with a solution for that too. :D
vijk2001
09-19-2002, 08:40 PM
Thanks Mordred..

But i have many fields on my form with the same functionality...
and im new to JS....and html stuff..
So if u can Hmmmm....give me the entire code.I can understand and duplicate it throughout my form.

Thanks and i luv ur sense of humour..
voila...is french..and ur german?..Hmm...
Waiting for the code..
vij.
mordred
09-19-2002, 11:09 PM
Ok, I'm in my altruistic mode right now, but I hope this is not an assignment for a course work, because I don't really want to support cheating.

A quickly hacked proof of concept, tested and confirmed for Mozilla 1.0:


<html>
<head>
<title>blah</title>
<script>
function toggleList(id) {
if (document.getElementById(id).style.display == "none") {
var newDisplay = "inline";
} else {
var newDisplay = "none";
}

document.getElementById(id).style.display = newDisplay;
}
</script>
</head>
<body>

<form name="myForm">
cboxA <input type="checkbox" name="cboxA" onclick="toggleList('hiddenList');" />

<span id="hiddenList" style="display:none;">
<select>
<option>val 1</option>
<option>val 2</option>
<option>val 3</option>
</select>
</span>
</form>

</body>
</html>


You can also affect the sort of the display by setting a different value than "inline".

Originally posted by vijk2001
Thanks and i luv ur sense of humour..
voila...is french..and ur german?..Hmm...


Believe it or not, but most pupils in Germany suffer from long-term exposure to french classes in high school. Me included, and I'm afraid it actually had an effect on me and my mental health. At least I can remember "voilą'.... :D