URGENT PLZ HELP ! Show/Hide tables from Radio Buttons

[nisarali23]

Hi all,

I need very urgent help. In my form i hv two radio button "Existing customer" and New customer. when user clicks on existing customer then its hidden table with few text field appears and when user clicks on "new customer" radio button one new table with "continue" button shd appear and existing customers table shd get hided and vise versa.

i have tried with this and some thing is work with this code:

<table width="600" height="150" border="1" cellpadding="0" cellspacing="0" bordercolor="EFEFE0">
<tr>
<td width="187"><img src="img/exis_new.jpg" width="187" height="150"></td>
<td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="3%" height="25" bgcolor="D6CFB1">&nbsp;</td>
<td height="25" colspan="2" bgcolor="D6CFB1"><strong><font size="2" face="Arial, Helvetica, sans-serif">Home
Loan Application</font></strong></td>
<td width="1%" height="25" bgcolor="D6CFB1">&nbsp;</td>
<td width="6%" height="25" bgcolor="D6CFB1">&nbsp;</td>
<td width="41%" height="25" bgcolor="D6CFB1">&nbsp;</td>
</tr>
<tr>
<td height="5"></td>
<td width="4%" height="5"></td>
<td width="45%" height="5"></td>
<td height="5"></td>
<td height="5"></td>
<td height="5"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td> <font size="2" face="Arial, Helvetica, sans-serif">
<input type="radio" name="pctype" value="laptop" onfocus="showlaptop('laptop');return true;"/>
</font></td>
<td><font size="2" face="Arial, Helvetica, sans-serif"> Existing
Customer</font></td>
<td>&nbsp;</td>
<td align="right" bgcolor="FBFBF1"> <input type="radio" name="pctype" value="desktop" onFocus="hidelaptop('laptop');return false;" checked>
</td>
<td bgcolor="FBFBF1"><font size="2" face="Arial, Helvetica, sans-serif">New
Customer</font></td>
</tr>
<tr>
<td height="5"></td>
<td height="5"></td>
<td height="5"></td>
<td height="5"></td>
<td height="5"></td>
<td height="5"></td>
</tr>
<tr>
<td height="25">&nbsp; </td>
<td height="25" colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr id="laptop" style="display: none;">
<td><table width="92%" border="1" cellpadding="1" cellspacing="1" bordercolor="EFEFE0">
<tr>
<td width="48%" height="20"><font size="2" face="Arial, Helvetica, sans-serif">Date
of Birth :</font></td>
<td width="52%" height="20"> <input name="textfield" type="text" size="8"></td>
</tr>
<tr>
<td height="20"><font size="2" face="Arial, Helvetica, sans-serif">Password
: </font></td>
<td height="20"> <input name="textfield2" type="text" size="8"></td>
</tr>
<tr align="center">
<td height="35" colspan="2"><font size="2" face="Arial, Helvetica, sans-serif">
<input type="submit" name="Submit2" value="Open saved form">
</font></td>
</tr>
</table></td>
</tr>
</table></td>
<td>&nbsp;</td>
<td colspan="2" align="center" valign="top" bgcolor="FBFBF1">
<table width="90%" border="1" cellpadding="1" cellspacing="0" bordercolor="EFEFE0">
<tr id="laptop" style="display: none;">
<td height="35" align="left">
<input type="submit" name="Submit" value="Continue&gt;&gt;&gt;">
</td>
</tr>
</table> </td>
</tr>
</table></td>
</tr>
</table>

[toicontien]

Here's a quick and simple shell that you can use that would achieve what you want.

function showForm(form) {
if (document.getElementById) {
var custTypes = form.customerType;

if (custTypes[0].checked) {
document.getElementById("existingCustomer").style.display = "none";
document.getElementById("newCustomer").style.display = "block";
} else {
document.getElementById("newCustomer").style.display = "none";
document.getElementById("existingCustomer").style.display = "block";
}
}
}


<label for="custType1">
<input type="radio" name="customerType" value="new" id="custType1" onfocus="showForm(this.form);">
New Customer
</label>

<label for="custType2">
<input type="radio" name="customerType" value="existing" id="custType2" onfocus="showForm(this.form);">
Existing Customer
</label>

<div id="newCustomer">
New Customer Form Elements Go Here
</div>

<div id="existingCustomer">
Existing Customer Form Elements Go Here
</div>