PDA

View Full Version : JavaScript: visibility change in forms

Juparis
07-10-2004, 02:01 AM
My goal is to have a form that hides and shows different fields according to a user's selection. My friend found me this code that should help, but I know nearly nothing of JavaScript, and don't know how to manipulate it without slaughtering it altogether. Can anyone tell me how I could set most fields to a default, and have a user choose between a few radio buttons. Depending on the selection, more fields would appear. I heard this doesn't work in Netscape, but I'm using IE, and don't know what to do to avoid the problem. I would prefer this technique to help manage my allowed space and pages on my host. Here's the example code I was given:

<html>
<head>
</head>
<body>

<form>
<span id="divt1" style="visibility:visible;position:relative;top:0;left:0">
Type 1 Input: <input name="t1" type="text" value="">
</span>
<BR>
<span id="divt2" style="visibility:visible;position:relative;top:0;left:0;">
Type 2 Input: <input name="t2" type="text" value="">
</span>
<BR>
Type 1 Visible <input name="r1" type="radio" checked value="" onClick="toggleT('divt1','s')">
Hidden <input name="r1" type="radio" value="" onClick="toggleT('divt1','h')"><BR>
Type 2 Visible <input name="r2" type="radio" checked value="" onClick="toggleT('divt2','s')">
Hidden <input name="r2" type="radio" value="" onClick="toggleT('divt2','h')">
</form>
<script type=text/javascript>
var isIE=document.all?true:false;
var isDOM=document.getElementById?true:false;
var isNS4=document.layers?true:false;

/* _w : which ID (1) or (2) */
/* _h : (h)ide or (s)how */
function toggleT(_w,_h) {
if (isDOM)
{
if (_h=='s') document.getElementById(_w).style.visibility='visible';
if (_h=='h') document.getElementById(_w).style.visibility='hidden';
}
else if (isIE) {
if (_h=='s') eval("document.all."+_w+".style.visibility='visible';");
if (_h=='h') eval("document.all."+_w+".style.visibility='hidden';");
}
else if(isNS4)
{
if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';");
if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';");
}
}
</script>
</body>
</html>
agent002
07-10-2004, 04:57 AM
Well, looking at the code, I can see that it's compatible with Netscape (and all other Geckos), even Netscape 4! Although supporting NN4 is pointless. Anyway, try this instead... this goes between the <head> and </head> tags:
<script type="text/javascript">
//<![CDATA[

function toggleFields(){
var e = new Array();
for(var i = 0; i < arguments.length; i++){
e[arguments[i]] = true;
}
var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++){
if(inputs[i].className == 'toggleField'){
if(e[inputs[i].name])
inputs[i].style.display = 'inline';
else
inputs[i].style.display = 'none';
}
}
}

//]]>
</script>
<style type="text/css">
/*<![CDATA[*/

.toggleField {
display: none;
}

/*]]>*/
</style>

All inputs whose visibility you want to toggle should have a name, and the "toggleField" class name:
<input type="text" name="sampleInput" class="toggleField">

If you want it to be visible by default, add style="display: inline;" to the tag. To toggle the visibility, use the toggleFields() function:
<input type="radio" name="someopt" onclick="toggleFields('sampleInput');">
<input type="radio" name="someopt"
onclick="toggleFields('anotherSample');">

The function simply hides all inputs with the "toggleField" class name, except for the one(s) you gave in the function arguments.
Juparis
07-10-2004, 10:56 AM
I was about to praise you eternally, but I acted too soon. I can't toggle the words in front of each field, and once a field is visible, it stays visible until a different field is selected (aka when it's been unselected, it's still there). I'm using checkboxes, which may be at some fault, but I don't know any other way to offer more than just one option (radio buttons). One other problem is that I can't figure out how to toggle the visibility with two fields from just one selection near the beginning. :(

Just as an added bonus, does anyone know of a way to make the fields scroll towards the top if there are no visible fields above it? Otherwise I'd be left with a huge gap in the page. I don't want to make things any more complicated than JavaScript, so if I must use Java or some other script, forget it, heh..
Juparis
07-12-2004, 02:58 PM
Anyone? Or is there no solution to this?
agent002
07-16-2004, 01:22 PM
Sorry bout the delay, I was in Karelia for a few days. The script works perfectly, see the attachment. You said nothing about checkboxes. If you want to use checkboxes, you need a very different script.
Juparis
07-16-2004, 02:02 PM
Oh, sorry for being impatient... and for not mentioning the checkboxes; :doh: I didn't think it would make a difference. Thanks for your help though!

How would I adjust the coding for checkboxes then? I can work without them, but if you don't mind, I'd like to know...
agent002
07-16-2004, 03:03 PM
Here, this should work with checkboxes (not radio groups though):
Juparis
07-16-2004, 05:35 PM
Thank you sooo much; that's exactly what I needed! I would have never been able to do that on my own and am forever in your debt (well, maybe that's a little far...).

Just one more question though; how can I get one checkbox to reveal more than just one field? I tried editing it every way I know (unless I'm just stupid and it's right under my nose), but anytime I try to change it, the checkbox doesn't reveal ANY fields. :confused: