PDA

Click to See Complete Forum and Search --> : Help: How to make table visible on radiobutton state

lvsaint
10-09-2006, 05:14 AM
Hello all,

http://www.studio6.com.sg/help.html

This is what I’m trying to achieve. If you look at my page at "Particulars of Parents/Guardian" there is a radio button group. Below that there are two tables. One table is Parents and the other is Guardian. I want both tables to be at first hidden. When i click the parents radio button i want the parents set of tables to appear and vice versa for the guardian.

If you scroll below the page you can see i tried something with "accept" and "reject" but not too sure how to make it for a table.


Secondly I need help on how to design the particulars of applicant set of fields so that they look neat. Now they look messy.

Thank you for your help. Greatly appreciated.
Welshsteve
10-09-2006, 06:04 AM
This is a very basic example, but you can use the GetElementByID function in Javascript to show or hide elements. In the below example I've given each tabe an ID and set it's display attribute to NONE. Then the script toggles between displaying this as NONE, or BLOCK.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="" />
<meta name="description" content="" />

<title>Show/Hide</title>

<script type="text/javascript">
function toggleBlock(elementId) {
var element = document.getElementById(elementId);
if(element.style.display == 'block')
element.style.display = 'none';
else
element.style.display = 'block';
}
</script>

</head>

<body>

<a href="#" onclick="toggleBlock('table1'); return false;" style="font-weight:bold;">Table 1</a>
<div id="table1" style="display:none;margin-left:10px;">
<table>
<tr><th colspan="2">TABLE 1</th></tr>
<tr><td>A1</td><td>B1</td></tr>
<tr><td>A2</td><td>B2</td></tr>
</table>
</div>
<br /><hr style="width:200px;float:left;" /><br />
<a href="#" onclick="toggleBlock('table2'); return false;" style="font-weight:bold;">Table 2</a>
<div id="table2" style="display:none;margin-left:10px;">
<table>
<tr><th colspan="2">TABLE 2</th></tr>
<tr><td>A1</td><td>B1</td></tr>
<tr><td>A2</td><td>B2</td></tr>
</table>
</div>

</body>
</html>


Hope this helps.
lvsaint
10-09-2006, 06:23 AM
Thank you very much Welshsteve.

But how do i modify the code so that it works on a radiobutton event. Also at any one time only one table must be shown and not both.

Thank you once again
lvsaint
10-09-2006, 06:32 AM
ok i did this and it works...

onclick="toggleBlock('table1')" in the radiobutton event.

But not sure how to change the script so that only one table is shown at any one time
lvsaint
10-09-2006, 06:44 AM
http://www.studio6.com.sg/button.html

Do have a look here. After clicking the radio button the table order gets mixed up... :confused: :confused: :confused:
Welshsteve
10-09-2006, 07:06 AM
That's nearly there. I'll take another look. Be back soon ;)
lvsaint
10-09-2006, 10:30 AM
Thank you...

looking forward to your help..
Welshsteve
10-10-2006, 02:49 AM
Hi lvsaint, sorry for the delay. Try the below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Show/Hide</title>
<style type="text/css">
<!--
label {
font-weight:bold;
}
.hide {
display:none;
margin-left:10px;
}
-->
</style>
<script type="text/javascript">
<!--
window.onload=function() {

inp=document.getElementsByTagName('input');
for(c=0;c<inp.length;c++) {
inp[c].onclick=function() {

for(c=0;c<inp.length;c++) {
document.getElementById('table'+(c+1)).className='hide';
}
num=this.id.split('rad')[1]
document.getElementById('table'+num).className='';
}
}
}
//-->
</script>

</head>
<body>

<div>
<input type="radio" name="steve" id="rad1"/><label for="rad1"> Table 1</label>
<input type="radio" name="steve" id="rad2"/><label for="rad2"> Table 2</label>
<input type="radio" name="steve" id="rad3"/><label for="rad3"> Table 3</label>
<input type="radio" name="steve" id="rad4"/><label for="rad4"> Table 4</label>
</div>

<table id="table1" class="hide">
<tr><th colspan="2">TABLE 1</th></tr>
<tr><td>A1</td><td>B1</td></tr>
<tr><td>A2</td><td>B2</td></tr>
</table>
<table id="table2" class="hide">
<tr><th colspan="2">TABLE 2</th></tr>
<tr><td>C1</td><td>D1</td></tr>
<tr><td>C2</td><td>D2</td></tr>
</table>
<table id="table3" class="hide">
<tr><th colspan="2">TABLE 3</th></tr>
<tr><td>E1</td><td>F1</td></tr>
<tr><td>E2</td><td>F2</td></tr>
</table>
<table id="table4" class="hide">
<tr><th colspan="2">TABLE 4</th></tr>
<tr><td>G1</td><td>H1</td></tr>
<tr><td>G2</td><td>H2</td></tr>
</table>

</body>
</html>