Hide/Show fields on a form

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
Post Reply
psy
Power Poster
Power Poster
Posts: 463
Joined: Sat Jan 22, 2005 11:19 am

Hide/Show fields on a form

Post by psy »

The following was developed to hide/show fields in a module frontend form, not FormBuilder, although should work with any front end form. You will just have to modify the code to find your HTML elements.

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('');
     }
}
		
Next code your form, eg:

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>
In the above sample form part, the field 'myradiobuttons_yn' is a radio button set with the choices 'Yes' and 'No'.

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}
When the 'Yes' (the text displayed with the option) radio is clicked in the radio button field choices, the 'mytextfield' text field is displayed and the 'required' class added.

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!
elkman
Power Poster
Power Poster
Posts: 262
Joined: Thu Jan 11, 2007 9:16 pm
Location: Colorado

Re: Hide/Show fields on a form

Post by elkman »

This appears to be a great idea. Do you have a live example anywhere that could be viewed?

Elkman
Post Reply

Return to “Tips and Tricks”