Radio button hide a table

**jlpl** · Feb 17, 2005 10:03

Anyone with javascript experience please help me:
I got to radio button, by default the first radio button is checked and display a table below with all the values, if I click on the second radio button, the table will hide and another table will display with different value. Just like a swich

<input type=radio name=radio1 value="" checked>
<input type =radio name=radio2 value="">
<table1> will tight with radio1 when click radio1
<table2> will tight with radio2 when click radio2
thnks you so much for your helpundefined

**coothead** · Feb 17, 2005 10:50

Hi there jlpl,

and a warm welcome to these forums

Try this it may suit your purposes...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>radio switching</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

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

#table1{
     width:200px;
     border:solid 1px #000;
}
#table1 td {
     width:200px;
     border:solid 1px #000;
     text-align:center;
}
#table2 {
     width:300px;
     border:solid 1px #000;
     display:none;
}
#table2 td {
     width:300px;
     height:100px;
     border:solid 1px #000;
     text-align:center;
}

/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

function hideShow(num,id1,id2) {

if(document.forms[0][num].checked==true) {
   document.forms[0][num].checked=false;
   document.getElementById(id1).style.display="none";
   document.getElementById(id2).style.display="block";
  }
 }

//]]>
</script>

</head>
<body>

<form action="#">
<div>
<input type="radio" checked="checked" onclick="hideShow(1,'table2','table1')"/>
<label> : table one</label>
</div>
<div>
<input type="radio" onclick="hideShow(0,'table1','table2')"/>
<label> : table one</label>
</div>
</form>

<table id="table1"><tr>
<td>this is table one</td>
</tr></table>

<table id="table2"><tr>
<td>this is table two</td>
</tr></table>

</body>
</html>

coothead

**jlpl** · Feb 17, 2005 11:06

First, thank you for your qucik response, I copy your code and test it out, it works when I first load it, but if I try to click again on any radio button , it won't let me, I am working on a search page, for example, the user can click on radio 1 or radio 2 anytime, and base on their action, the different table will display. YOur sample just let me swicth one time, after that it stay no change.
Thnks for any further help.
Regards,

**jlpl** · Feb 17, 2005 11:34

i have modified your script a bid and i got it to switch between clicking radio button, the only problem is the radio button is not checked when I click on it. It is only checked for the first time it load the form.

here is the code that i modified, please help if you know how to get the check (green hightlight) inside the radio button: THANKS SO MUCH
REGARDS,

<script type="text/javascript">
//<![CDATA[

function hideShow(num,id1,id2) {

if(document.forms[0][num].checked==true)
{
document.forms[0][num].checked=false;
document.getElementById(id1).style.display="none";
document.getElementById(id2).style.display="block";
}
else if (document.forms[0][num].checked==false) {
document.forms[0][num].checked=false;
document.getElementById(id1).style.display="none";
document.getElementById(id2).style.display="block";
}
}

//]]>
</script>

**jimfraser** · Feb 17, 2005 11:48

the line directly under else if is:
document.forms[0][num].checked=false;
it should probably be
document.forms[0][num].checked=true;

**jlpl** · Feb 18, 2005 11:18

I have change the statement after else if to true but still not doing properly, please help if you could. Here is the code:
Regards

<html>
<head>
<style type="text/css">
/*<![CDATA[*/

#table1{
width:200px;
border:solid 1px #000;
}
#table1 td {
width:200px;
border:solid 0px #000;
text-align:left;
}
#table2 {
width:200px;
border:solid 1px #000;
display:none;
}
#table2 td {
width:200px;
height:100px;
border:solid 0px #000;
text-align:left;
}

/*//]]>*/
</style>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</head>
<body>
<form action="#">
<div>
<input type="radio" checked onclick="hideShow(1,'table2','table1')"/>
table one
</div>
<div>
<input type="radio" onclick="hideShow(0,'table1','table2')"/>
<label> : table two</label>
</form>
<table id="table1">
<tr>
<td>
<div><small><a href="#" onclick="pasteText('and');">and</a></small></div>
<div><small><a href="#" onclick="pasteText('or');">or</small></div>
<div><small><a href="#" onclick="pasteText('w/N');">w/N</small></div>
<div><small><a href="#" onclick="pasteText('not w/N');">not w/N</small></div>
<div><a href="#" onclick="pasteText('pre /N');">pre /N</small></div>
<div><small><a href="#" onclick="pasteText('w /p');">w /p</small></div>
<div><small><a href="#" onclick="pasteText('not w/p');">not w/p</small></div>
<div><small><a href="#" onclick="pasteText('pre /N');">pre /N</small></div>
<div><small><a href="#" onclick="pasteText('w/seg');">w/seg</small></div>
<div><small><a href="#" onclick="pasteText('not w/seg');">not w/seg</small></div>
<div><small><a href="#" onclick="pasteText('not w/seg');">w/s</small></div>
<div><small><a href="#" onclick="pasteText('not w/s');">not w/s</small></div>
<div><small><a href="#" onclick="pasteText('and not');">and not</small></div>

</td>
</tr>
</table>
<table id="table2">
<tr>
<td>
<div><small><a href="#" onclick="pasteText('and');">and</a></small></div>
<div><small><a href="#" onclick="pasteText('and not');">and not</small></div>
<div><small><a href="#" onclick="pasteText('or');">or</small></div>
<div><small><a href="#" onclick="pasteText('within');">within</small></div>
</td>
</tr>
</table>
</body>
</html>

**jimfraser** · Feb 18, 2005 12:01

This works:

Code:

<html>
<head>
<style type="text/css">
/*<![CDATA[*/

#table1{
width:200px;
border:solid 1px #000;
}
#table1 td {
width:200px;
border:solid 0px #000;
text-align:left;
}
#table2 {
width:200px;
border:solid 1px #000;
display:none;
}
#table2 td {
width:200px;
height:100px;
border:solid 0px #000;
text-align:left;
}

/*//]]>*/
</style>


<SCRIPT LANGUAGE="JavaScript">
<!--
function testResults (form) {
var TestVar = form.inputbox.value;
form.Where.value = TestVar;
}
function pasteText(obj) {
theForm.Where.value = obj;
}

function hideShow() {
if( document.getElementById("rad1").checked ) {
	document.getElementById("table1").style.display="block";
	document.getElementById("table2").style.display="none";
} else {
	document.getElementById("table2").style.display="block";
	document.getElementById("table1").style.display="none";
}
}
//-->
</SCRIPT>
</head>
<body>
<form action="#">
<div>
<input type="radio" id="rad1" name="rad" checked onclick="hideShow()"/>
table one
</div>
<div>
<input type="radio" id="rad2" name="rad" onclick="hideShow()"/>
<label> : table two</label>
</form>
<table id="table1">
<tr>
<td>
<div><small><a href="#" onclick="pasteText('and');">and</a></small></div>
<div><small><a href="#" onclick="pasteText('or');">or</small></div>
<div><small><a href="#" onclick="pasteText('w/N');">w/N</small></div>
<div><small><a href="#" onclick="pasteText('not w/N');">not w/N</small></div>
<div><a href="#" onclick="pasteText('pre /N');">pre /N</small></div>
<div><small><a href="#" onclick="pasteText('w /p');">w /p</small></div>
<div><small><a href="#" onclick="pasteText('not w/p');">not w/p</small></div>
<div><small><a href="#" onclick="pasteText('pre /N');">pre /N</small></div>
<div><small><a href="#" onclick="pasteText('w/seg');">w/seg</small></div>
<div><small><a href="#" onclick="pasteText('not w/seg');">not w/seg</small></div>
<div><small><a href="#" onclick="pasteText('not w/seg');">w/s</small></div>
<div><small><a href="#" onclick="pasteText('not w/s');">not w/s</small></div>
<div><small><a href="#" onclick="pasteText('and not');">and not</small></div>

</td>
</tr>
</table>
<table id="table2">
<tr>
<td>
<div><small><a href="#" onclick="pasteText('and');">and</a></small></div>
<div><small><a href="#" onclick="pasteText('and not');">and not</small></div>
<div><small><a href="#" onclick="pasteText('or');">or</small></div>
<div><small><a href="#" onclick="pasteText('within');">within</small></div>
</td>
</tr>
</table>
</body>
</html>

**jlpl** · Feb 19, 2005 12:20

I am really appreciated your input and help. Sure it works.
Regards

User Tag List

Thread: Radio button hide a table

Thread Tools

Display

Radio button hide a table

Hello Codehead

still having problem with the checked radio thanks

Thank you so much for the help JimFraser!!

Bookmarks

Bookmarks

Posting Permissions