Firstly, create a jQuery function:
Code: Select all
// Show/Hide form fields following radio or select fields
jQuery.fn.showField = function(showField, choice){
var answer = $(this).next().text();
if (answer == choice) {
$(this).parentsUntil('form').parent().find(showField).removeClass('accessibility');
$(showField + ' select').addClass('chooseOne');
$(showField + ' input').addClass('required');
$(showField + ' textarea').addClass('required');
}
else {
$(this).parentsUntil('form').parent().find(showField).addClass('accessibility');
$(showField + ' select').removeClass('chooseOne').val('');
$(showField + ' input').removeClass('required').val('');
$(showField + ' textarea').removeClass('required').val('');
}
}
Code: Select all
<div id="myradiobuttons_yn">
<p class="left49" style="clear:left">{$item->myradiobuttons_yn->Label()} :</p>
<p class="left49 required">{$item->myradiobuttons_yn}</p>
</div>
<div class="accessibility" id="mytextfield">
<p class="left49" style="clear:left">{$item->mytextfield->Label()} :</p>
<p class="left49">{$item->mytextfield}</p>
</div>
The following field uses the 'accessibility' class. This CSS class is found in the the standard cms stylesheet, "Accessibility and cross-browser tools". I used this to hide the field from display and at the same time, keep it in the DOM so the form would submit even if the radio button choice was 'No'.
The id is added to the entire HTML related to the un-displayed field so that the label etc wont show unless it's required.
Next, add your custom jquery js to call the function:
Code: Select all
{literal}
<__script__ type="text/javascript">
$(document).ready(function(){
// Validate the form
$('#myform input[type="submit"]').click(function() {
$('#myform').validate();
});
// Show/hide fields and add/remove validation
$('input[name$="myradiobuttons_yn"]').click(function(){
$(this).showField('#mytextfield','Yes');
});
});
</__script>
{/literal}
Add the 'showField' call for every field that has a following hide/show field.
Please Note:
The form uses jquery.validation.js to validate the form prior to submission. If the 'required' class was included in the original form HTML on the hidden 'mytextfield' field, it would never submit.
Have fun with it!