Hide/Show several tables based upon radio button selection.

[lahddah]

Hi, can somebody tell me how to make this work? I would like tables 1-3 to show up depending on which radio button is checked. (if 1 is checked, then vehicle1 table should be the only one showing...if 2 is checked then vehicle1 and vehicle2 tables should show....if 3 is checked, then all three vehicle tables should show). Right now, when I check any of them all three tables show.

Also, once we can figure that out, how do I get it to work in NS?

http://web1.adventuresports.com/javascripttest.htm

Thanks, in advance!!

~ lahddah

 

[Supra]

Well, first off, this isn't proper if / else usage:

if (document.orderform.vehicle_number.value [red]=[/red] "1")

That code is actually setting vehicle_number's value to 1 every time you click it. Instead, use [green]==[/green]. I revised the script and shortened it significantly:

<script>
<!--
function ValidVehic(n) {
	for (c=1; c<4; c++) {
		eval("vehic"+c).style.display = "none";
	}
	for (c=1; c<=n; c++) {
		eval("vehic"+c).style.display = "block";
	}
}
//-->
</script>

Instead of using ValidVehic(), I threw the n parameter to pass the value of the radio button clicked. You'll need to change your radio buttons to this:

<INPUT TYPE="RADIO" NAME="vehicle_number" VALUE="1" ONCLICK="ValidVehic([green]this.value[/green])">

 

[lahddah]

Thanks Supra. I know to use the '==' but had copied the code from another javascript site and didn't think to change it! Oops. Your suggestions sound as if they should work...I will try tomorrow and let you know.

Thanks, again!!


~ lahddah

 

[lahddah]

Okay, Supra....your code works great! Thank you! However, (isn't there always a 'however'), it is not working in NS7 or earlier. Is there any way to either get it to work here. If not, then I'll just need to write something that says if the user has netscape, then show all tables. Is this possible when I'm using DIV tags with 'display:none'?

Thanks!


~ lahddah

 

[BillyRayPreachersSon]

Try changing your ValidVehic function to be as follows. It should be more DOM compliant (and thus might work in NN7), and scraps the use of eval, which has a latency attached to its execution:

function ValidVehic(n) {
    for (var c=1; c<=n; c++) document.getElementById('vehic' + c).style.display = 'block';
    for (var c=n+1; c<4; c++) document.getElementById('vehic' + c).style.display = 'none';
}

Hope this helps,
Dan

 

[lahddah]

Thanks, Dan. It does work in NN7 (wahooo!), but now when you choose a number - say, three - then three tables come up (good). However, when you then click two or one, the number of tables showing doesn't change (still shows three). This happens in both netscape and IE. What's the obvious solution? My radio buttons have this
'ONCLICK="ValidVehic(this.value)' w/ the value being 1,2, or 3.

Thanks!


~ lahddah

 

[BillyRayPreachersSon]

Just a thought... Try changing the initial state of the second for statement from this:

var c=n+1

to this:

var c=parseInt(n, 10)+1

It may we be that "c" was a string, and so "c+1" would have made "11", not 2 ;o)

Hope this helps,
Dan

 

[lahddah]

BEAUTY! Thank you SO much! Doesn't seem to work in earlier versions of Netscape, but folks using ns4* & earlier don't deserve to see it work, anyway!

Now....so that this form will work for the majority of folks, is there a way to say something like 'if the user has javascript disabled, then all tables should display'?

I'll go looking through the FAQ's just in case this is covered a bunch of times & I just missed it!

Thanks, again!


~ lahddah

 

[LFI]

Yes,

Have all the tables shown to begin with, then hide the ones you want to hide using a function call in the BODY tag's onload event. If JavaScript is disabled, they will all remain shown.

--Dave

 

[lahddah]

Okay, so right now all tables are in their on DIV tag w/ a different id and each table as a style="display:none" on them. Should I remove that for each table? What is the BODY function (no...not 'bodily function'!) that I need to use? (<NOSCRIPT>?)



~ lahddah

 

[LFI]

Yes, take out the display:none's to begin with, then in your BODY tag put:

<body onload='hideTables()'>

Then, write a JavaScript function that sets the style.displays of the three (or however-many) DIVs to none, just like you do in your ValidVehic(...) function now.

As long as you have the comment tags (<!-- and -->) around the SCRIPT tags, then the call to hideTables() just won't do anything if the JavaScript is disabled. At least, that's what I think will happen.

--Dave