Help: How to make table visible on radiobutton state

@lvsaintOct 09.2006

Hello all,

~~[URL=http://www.studio6.com.sg/help.html]~~http://www.studio6.com.sg/help.html[/URL]

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.

to post a comment

HTML

7 Comments(s) _↴

@WelshsteveOct 09.2006 — #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.

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" &gt;
 &lt;head&gt;
 
 <i>	</i>&lt;meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /&gt;
 <i>	</i>&lt;meta name="keywords" content="" /&gt;
 <i>	</i>&lt;meta name="description" content="" /&gt;
 
 <i>	</i>&lt;title&gt;Show/Hide&lt;/title&gt;
 
 &lt;script type="text/javascript"&gt;
 function toggleBlock(elementId) {
 var element = document.getElementById(elementId);
 if(element.style.display == 'block')
 element.style.display = 'none';
 else
 element.style.display = 'block';
 }
 &lt;/script&gt;
 
 &lt;/head&gt;
 
 &lt;body&gt;
 
 &lt;a href="#" onclick="toggleBlock('table1'); return false;" style="font-weight:bold;"&gt;Table 1&lt;/a&gt;
 &lt;div id="table1" style="display:none;margin-left:10px;"&gt;
 &lt;table&gt;
 &lt;tr&gt;&lt;th colspan="2"&gt;TABLE 1&lt;/th&gt;&lt;/tr&gt;
 &lt;tr&gt;&lt;td&gt;A1&lt;/td&gt;&lt;td&gt;B1&lt;/td&gt;&lt;/tr&gt;
 &lt;tr&gt;&lt;td&gt;A2&lt;/td&gt;&lt;td&gt;B2&lt;/td&gt;&lt;/tr&gt;
 &lt;/table&gt;
 &lt;/div&gt;
 &lt;br /&gt;&lt;hr style="width:200px;float:left;" /&gt;&lt;br /&gt;
 &lt;a href="#" onclick="toggleBlock('table2'); return false;" style="font-weight:bold;"&gt;Table 2&lt;/a&gt;
 &lt;div id="table2" style="display:none;margin-left:10px;"&gt;
 &lt;table&gt;
 &lt;tr&gt;&lt;th colspan="2"&gt;TABLE 2&lt;/th&gt;&lt;/tr&gt;
 &lt;tr&gt;&lt;td&gt;A1&lt;/td&gt;&lt;td&gt;B1&lt;/td&gt;&lt;/tr&gt;
 &lt;tr&gt;&lt;td&gt;A2&lt;/td&gt;&lt;td&gt;B2&lt;/td&gt;&lt;/tr&gt;
 &lt;/table&gt;
 &lt;/div&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

Hope this helps.

@lvsaintauthorOct 09.2006 — #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

@lvsaintauthorOct 09.2006 — #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

@lvsaintauthorOct 09.2006 — #[URL=http://www.studio6.com.sg/button.html]http://www.studio6.com.sg/button.html[/URL]

Do have a look here. After clicking the radio button the table order gets mixed up... ? ? ?

@WelshsteveOct 09.2006 — #That's nearly there. I'll take another look. Be back soon ?

@lvsaintauthorOct 09.2006 — #Thank you...

looking forward to your help..

@WelshsteveOct 10.2006 — #Hi lvsaint, sorry for the delay. Try the below.

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" &gt;
 &lt;head&gt;
 &lt;meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /&gt;
 &lt;meta name="keywords" content="" /&gt;
 &lt;meta name="description" content="" /&gt;
 &lt;title&gt;Show/Hide&lt;/title&gt;
 &lt;style type="text/css"&gt;
 &lt;!--
 label {
 font-weight:bold;
 }
 .hide {
 display:none;
 margin-left:10px;
 }
 --&gt;
 &lt;/style&gt; 
 &lt;script type="text/javascript"&gt;
 &lt;!--
 window.onload=function() {
 
 inp=document.getElementsByTagName('input');
 for(c=0;c&lt;inp.length;c++) {
 inp[c].onclick=function() {
 
 for(c=0;c&lt;inp.length;c++) {
 document.getElementById('table'+(c+1)).className='hide';
 }
 num=this.id.split('rad')[1]
 document.getElementById('table'+num).className='';
 }
 }
 }
 //--&gt;
 &lt;/script&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;div&gt;
 &lt;input type="radio" name="steve" id="rad1"/&gt;&lt;label for="rad1"&gt; Table 1&lt;/label&gt;
 &lt;input type="radio" name="steve" id="rad2"/&gt;&lt;label for="rad2"&gt; Table 2&lt;/label&gt;
 &lt;input type="radio" name="steve" id="rad3"/&gt;&lt;label for="rad3"&gt; Table 3&lt;/label&gt;
 &lt;input type="radio" name="steve" id="rad4"/&gt;&lt;label for="rad4"&gt; Table 4&lt;/label&gt;
 &lt;/div&gt;
 
 &lt;table id="table1" class="hide"&gt;
 &lt;tr&gt;&lt;th colspan="2"&gt;TABLE 1&lt;/th&gt;&lt;/tr&gt;
 &lt;tr&gt;&lt;td&gt;A1&lt;/td&gt;&lt;td&gt;B1&lt;/td&gt;&lt;/tr&gt;
 &lt;tr&gt;&lt;td&gt;A2&lt;/td&gt;&lt;td&gt;B2&lt;/td&gt;&lt;/tr&gt;
 &lt;/table&gt;
 &lt;table id="table2" class="hide"&gt;
 &lt;tr&gt;&lt;th colspan="2"&gt;TABLE 2&lt;/th&gt;&lt;/tr&gt;
 &lt;tr&gt;&lt;td&gt;C1&lt;/td&gt;&lt;td&gt;D1&lt;/td&gt;&lt;/tr&gt;
 &lt;tr&gt;&lt;td&gt;C2&lt;/td&gt;&lt;td&gt;D2&lt;/td&gt;&lt;/tr&gt;
 &lt;/table&gt;
 &lt;table id="table3" class="hide"&gt;
 &lt;tr&gt;&lt;th colspan="2"&gt;TABLE 3&lt;/th&gt;&lt;/tr&gt;
 &lt;tr&gt;&lt;td&gt;E1&lt;/td&gt;&lt;td&gt;F1&lt;/td&gt;&lt;/tr&gt;
 &lt;tr&gt;&lt;td&gt;E2&lt;/td&gt;&lt;td&gt;F2&lt;/td&gt;&lt;/tr&gt;
 &lt;/table&gt;
 &lt;table id="table4" class="hide"&gt;
 &lt;tr&gt;&lt;th colspan="2"&gt;TABLE 4&lt;/th&gt;&lt;/tr&gt;
 &lt;tr&gt;&lt;td&gt;G1&lt;/td&gt;&lt;td&gt;H1&lt;/td&gt;&lt;/tr&gt;
 &lt;tr&gt;&lt;td&gt;G2&lt;/td&gt;&lt;td&gt;H2&lt;/td&gt;&lt;/tr&gt;
 &lt;/table&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

Also in #HTML _↴

How do you create filters HTML Drop Down Box heidth How to position table and some more help needed...

Success!

Help @lvsaint spread the word by sharing this article on Twitter...

Tweet This

Help: How to make table visible on radiobutton state

7 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Help: How to make table visible on radiobutton state

7 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #HTML _↴