...

View Full Version : Simple table



Belloshoes
09-15-2011, 06:27 PM
Hi,

I am trying to create a radio button that when clicked shows a table. IF you can recommend a way to do it without Javascript that would be MOST helpful. Otherwise here is what I've got so far:

[CODE]<input type="radio" name="product" onclick="OnProductClick(this)" value="Stats" />Statistics
<input type="radio" name="product" onclick="OnProductClick(this)" value="Tradinghistory" /> Trading History
</p>

<script type="text/javascript">
var c = true;
var b = true;

function OnProductClick(product) {
if ((c) && (product.value == "Stats")) {
document.getElementById('St').style.display = "block";
c = false; b = true;
}

else if ((b) &&(product.value == "Tradinghistory")) {
document.getElementById('TrdH').style.display = "block";
c = true; b = false;
}

}
</script>[CODE]

Where St and TrdH are 2 seperate div ids for 2 different tables.


Please Help.


Many Thanks

DaveyErwin
09-15-2011, 08:37 PM
Greetings gentle person.
Here is some code if it
does not suit your needs
or if you have any question
please do post again.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>

<script type="text/javascript">
function OnProductClick(product) {
if (product.value == "Stats") {
document.getElementById('St').style.display = "block";
document.getElementById('TrdH').style.display = "none";;
}
else if (product.value == "Tradinghistory") {
document.getElementById('TrdH').style.display = "block";
document.getElementById('St').style.display = "none";
}
}
</script>
<style type="text/css">
.hidden{display:none;}
</style>
</head>
<body>
<form name="form1" action="" onsbumit="return false;">
<p><input type="radio" name="product" onclick="OnProductClick(this)" value="Stats" />Statistics
<input type="radio" name="product" onclick="OnProductClick(this)" value="Tradinghistory" /> Trading History
</p>
</form>
<div class="hidden" id="St">stats table goes here</div>
<div class="hidden" id="TrdH">Tradinghistory table goes here</div>
</body>
</html>

Have a most enjoyable day.

Belloshoes
09-16-2011, 12:32 AM
Thank you.

I'm trying it but it's still not working for some weird reason.

Could you run the code that you sent me and see if it works please?

Thanks again

DaveyErwin
09-16-2011, 12:38 AM
Yes, no problem.
I did a copy and paste
and tried it in Firefox
and ie8, what browser
are you using ?
and what results do
you get ?

Belloshoes
09-16-2011, 12:50 AM
I'm using Chrome. Your version works fine. I mean I run it and it is fine. But then when I integrate it into my code it just doesn't work.

Can I ask a big favour of you please. Can I send you my full code and you have a look at it, maybe you can spot something wrong with it that I can't. Would be a BIG help.

DaveyErwin
09-16-2011, 01:15 AM
Well if you could provide a link
there are others here who would
be interested in seeing your code
if you think it is too much to post
here, I've seen some very large
scripts here. You can always contact
me by clicking on my username
then clicking on contact info.

DaveyErwin
09-16-2011, 01:23 AM
Here is another way....


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>
<style type="text/css">
.hidden{display:none;}
</style>
</head>
<body>
<form name="form1" action="" onsbumit="return false;">
<p><input type="radio" name="product" onclick="document.getElementById('St').style.display =

'block';document.getElementById('TrdH').style.display = 'none';" value="Stats" />Statistics
<input type="radio" name="product" onclick="document.getElementById('TrdH').style.display =

'block';document.getElementById('St').style.display = 'none';" value="Tradinghistory" />

Trading History
</p>
</form>
<div class="hidden" id="St">stats table goes here</div>
<div class="hidden" id="TrdH">Tradinghistory table goes here</div>
</body>

I'm going to guess (not a good thing for me usually)
that your tables are generated serverside with php
or asp Or clientside with javascript and you are
having trouble getting them into the divs, so far I'm
about 90% on guesses(wrong of course)

xelawho
09-16-2011, 01:39 AM
and while we're collecting options...


<!DOCTYPE html>
<html>
<head>
<title>blank</title>
<meta charset="UTF-8">
</head>

<body>
<script type="text/javascript">
function OnProductClick(style1,style2) {
document.getElementById('St').style.display = style1;
document.getElementById('TrdH').style.display = style2;
}

</script>

<form name="form1" action="" onsbumit="return false;">
<p><input type="radio" name="product" onclick="OnProductClick('block','none')" value="Stats" />Statistics
<input type="radio" name="product" onclick="OnProductClick('none','block')" value="Tradinghistory" /> Trading History
</p>
</form>
<div style="display:none" id="St">stats table goes here</div>
<div style="display:none" id="TrdH">Tradinghistory table goes here</div>


</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum