Hi I have a page I am working and I am having some trouble with:

 

I need to show and hide areas based on a radio selection.

 

I initally started using the show / hide feature in Jquery but the problem is the elements need to be removed but then put back if the user selects the radio button again as it has form elements that have validaion on them.

 

The validation is still trying to validate the form elements becuase they are still on the page but just not showing.

 

This is the radio group the user makes the selection from:

 

<input  name="terms_usr" type="radio" id="terms_usr_1" value="1"/>
<label for="terms_usr_1">Credit Card</label>
<input   type="radio" name="terms_usr" id="terms_usr_2" value="2"/>
<label for="terms_usr_2">C.O.D</label>
<input   type="radio" name="terms_usr" id="terms_usr_3" value="3"/>
<label for="terms_usr_3">EFT</label>

 

_______________________________

Show if radio term_usr_1 checked

 

<table width="100%" border="0" id="terms1">
<tr>
<td align="left" valign="top"><

<input type="text" name="ccard_usr" id="ccard_usr" value="<?php echo KT_escapeAttribute($row_rsuser_usr['ccard_usr']); ?>" size="25" />

<select name="ccmonth_usr" id="ccmonth_usr" style="width:50px">
<option value=""  <?php if (!(strcmp("", KT_escapeAttribute($row_rsuser_usr['ccmonth_usr'])))) {echo "selected=\"selected\"";} ?>>Select - Month</option>

</select>

<select name="ccyear_usr" id="ccyear_usr" style="width:50px">
option value="" >Select - Year</option>

</select>

<input name="cccode_usr" type="text" id="cccode_usr" value="" size="4" maxlength="4" />
</td>

</tr>

</table>