...

View Full Version : Use Radio Button Value to trigger show/hide DIV



lhephner
10-27-2003, 09:54 PM
I'm new to JavaScript and I just can't seem to figure out what I am missing here--I'm sure its something incredibly simple.

My code is inelegant, but so far it works to show/hide tables based on radio button selections. Clicking any of the non "default" radio buttons will show <div name="set1">.

My problem is that I need to hide "set1" if and only if all of the port radio buttons are set to "default." I have tried to set up a checkstate () function to do this, but have failed miserably.

The javascript portion is reproduced below, and the entire page code is attached. Any help would be greatly appreciated.

<script type="text/javascript">
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
};

function show(id) {
document.getElementById(id).style.visibility = "visible";
};
</script>

<script type="text/javascript">
function checkstate() {

if ( form1.port1.value == "default" && form1.port2.value == "default" && form1.port3.value == "default" && form1.port4.value == "default")
{
document.set1.style.visibility = "hidden";
}
};
</script>

adios
10-28-2003, 01:50 AM
Made a couple of assumptions here...


<script type="text/javascript">

function hide()
{
for (var el, a = 0; a < arguments.length; ++a)
{
if (el = document.getElementById(arguments[a]))
el.style.visibility = 'hidden';
}
}

function show()
{
for (var el, a = 0; a < arguments.length; ++a)
{
if (el = document.getElementById(arguments[a]))
el.style.visibility = 'visible';
}
}

function checkstate(oForm)
{
if (oForm.port1[0].checked && oForm.port2[0].checked && oForm.port3[0].checked && oForm.port4[0].checked)
hide('set1');
}

onload = function()
{
var oForm = document.form1;
oForm.port1[0].checked = true;
oForm.port2[0].checked = true;
oForm.port3[0].checked = true;
oForm.port4[0].checked = true;
}

</script>

Your errors: referring to a radio collection (same names) without an index; checking its .value (irrelevent - you need to know if it's .checked).

btw I'd consider using the style.display property here, hiding entire 'panels' as needed; I would have written you a quick demo, but you'd need to reorganize the layout to include the legend (on the left) as part of each panel - and I'm lazy. Good idea, though. Just use identical tables, one above the other, each with its own legend. You don't need all the divs: td cells come completely equipped with all the usual HTMLElement goodies (at no additional cost). ;)

Kor
10-28-2003, 11:51 AM
You don't need all the divs: td cells come completely equipped with all the usual HTMLElement goodies


Well, I don't think that is quite a general solution, at least not for all the proprieties. Try to position absolute a TD in IE and in NS, you will see the difference.... :D

using DIVs seems safer for me (even I reckon I always use direct identification on other tags, like IFRAME)

lhephner
10-28-2003, 04:51 PM
Thank you very much for the suggestions.

I am off to try them.

adios
10-28-2003, 07:26 PM
Aargh. Forgot something....the HTML (helps). :o


<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="120">Features</td>
<td width="120">Port 1</td>
<td width="120">Port 2</td>
<td width="120">Port 3</td>
<td width="120">Port 4</td>
</tr>
<tr>
<td width="120">Port Options</td>
<td width="120">
<input type="radio" name="port1" value="default" checked
onclick="hide('port1top','port1bot');checkstate(this.form)">
Default<br>
<input type="radio" name="port1" value="tunneling"
onclick="hide('port1bot');show('port1top','set1')">
Tunneling<br>
<input type="radio" name="port1" value="raw"
onclick="hide('port1top');show('port1bot','set1')">
Raw TCP</td>
<td width="120">
<input type="radio" name="port2" value="default" checked
onclick="hide('port2top','port2bot');checkstate(this.form)">
Default<br>
<input type="radio" name="port2" value="tunneling"
onclick="hide('port2bot');show('port2top','set1');">
Tunneling<br>
<input type="radio" name="port2" value="raw"
onclick="hide('port2top');show('port2bot','set1')">
Raw TCP</td>
<td width="120">
<input type="radio" name="port3" value="default" checked
onclick="hide('port3top','port3bot');checkstate(this.form)">
Default<br>
<input type="radio" name="port3" value="tunneling"
onclick="hide('port3bot');show('port3top','set1');">
Tunneling<br>
<input type="radio" name="port3" value="raw"
onclick="hide('port3top');show('port3bot','set1')">
Raw TCP</td>
<td width="120">
<input type="radio" name="port4" value="default" checked
onclick="hide('port4top','port4bot');checkstate(this.form)">
Default<br>
<input type="radio" name="port4" value="tunneling"
onclick="hide('port4bot');show('port4top','set1')">
Tunneling<br>
<input type="radio" name="port4" value="raw"
onclick="hide('port4top');show('port4bot','set1')">
Raw TCP</td>
</tr>
</table>

lhephner
10-28-2003, 09:11 PM
Thanks so much for the extra effort to post the html portion.

I figured it out on my own--kinda. I really don't want the buttons to revert to "default" or checked on load, so I just deleted the var portion of the code, and used:

function checkstate()
{
if (document.form1.port1[0].checked && document.form1.port2[0].checked && document.form1.port3[0].checked && document.form1.port4[0].checked)
hide('set1');
}

That did the trick. And, it let me create a second function for the second table of data (contained in the same form) too.

Which brings me to my next question, if I am not pressing my luck here--

I've got the two tables functioning as desired, but would love to get some dynamic spacing going that would pull them both closer together when the DIV portions are hidden and space them out when the DIVs are visible. Any suggestions?

The new page code is attached.

All the help is very much appreciated!

adios
10-29-2003, 07:25 AM
hi, Lisa.

OK. Got in a little CSS practice here. It's completely possible - in-for-a-dollar, etc. - to toggle display on the entire thing, using just a toolbar at the top to switch between panels. I have a feeling you can handle that one yerself. ;)

cya, adios

lhephner
10-29-2003, 02:51 PM
Wow adios! Thank you! Much more help than I expected.

I can indeed take it from here. :)

Kor
10-30-2003, 07:17 AM
OK, here's a tip to use visibility:visible/hidden or display:inline/none.

If use visibility:hidden as a propriety, the object become transparent, but it keeps it's place on the page, position and dimensions. If use display:none the object disapears entirely, so the place where he was becomes empty... Now you have to know these when trying to move or hide some objects on the screen. In your case, if you are using dispaly you can make those tables come near, or something like that.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum