Hide Show Fields based on Radio Button Selection

[zbibas]

Here comes an easy and clean step-by-step way to show/hide fields based on a selection from radio button (group):

We will use jQuery to do this.

STEP1:
Wrap your form in a Class in the page you are calling the form as such:
{FormBuilder form='hideit'}
The name and Class do not have to be the same!


STEP 2:
Add a Radio Button Group field to your Formbuilder form (ex:hider), and add three selection possibilities.

STEP 3:
Add 3 (any number) fields of any sort to your Formbuilder form (text input, pulldown...whatever suits you)
Assign a Class to EACH one of them (ex: region1 ; region2 ; region3)

STEP 4:
Go to your form template and add the following in between your script tags (       )

jQuery(document).ready(function(){
  // on load hide some field that is conditional
  jQuery('#hideit').find('.region1').hide();
  jQuery('#hideit').find('.region2').hide();
  jQuery('#hideit').find('.region3').hide();

Where hideit is the name of the Class in STEP 1
Where region1  /2  /3  are the names of the Classes of the hidden fields (STEP 3)


STEP 5:

Add the following after the jQuery hiding phase

$("input[name='cntnt01fbrp__356']").click(function(){
    $("input[name='cntnt01fbrp__356']:checked").val() == 1 ? $('.region1').show('slow'): $('.region1').hide();});

$("input[name='cntnt01fbrp__356']").click(function(){
    $("input[name='cntnt01fbrp__356']:checked").val() == 2 ? $('.region2').show('slow'): $('.region2').hide();});

$("input[name='cntnt01fbrp__356']").click(function(){
    $("input[name='cntnt01fbrp__356']:checked").val() == 3 ? $('.region3').show('slow'): $('.region3').hide();});

});


Where  cntnt01fbrp__356 is the name of the Radio Button Group as used by FormBuilder (check in main page of your Form the number to the left of the Radio Button Group field - Field Id) - (you may also find it easily with the Firefox plug-in: Fire Bug Highly recommended!)

Where val() == 1 or 2 or 3 are the sequential values assigned by FormBuilder to each option of the Radio Button Group

Where region1 or 2 or 3 are the Classes assigned to each of the fields to be hidden (STEP 3)


SUMMARY

One Class (ex:hideit) for your call to Formbuilder form
One Radio Button Group with n options
Three (any number you need) to be hidden fields - Each one assigned a Class (ex: region1, region2, region3...)
Editon of Form template in between your script tags as follows:

[glow=red,2,300]jQuery(document).ready(function(){
  // on load hide some field that is conditional
  jQuery('#hideit').find('.region1').hide();
  jQuery('#hideit').find('.region2').hide();
  jQuery('#hideit').find('.region3').hide();


$("input[name='cntnt01fbrp__356']").click(function(){
    $("input[name='cntnt01fbrp__356']:checked").val() == 1 ? $('.region1').show('slow'): $('.region1').hide();});

$("input[name='cntnt01fbrp__356']").click(function(){
    $("input[name='cntnt01fbrp__356']:checked").val() == 2 ? $('.region2').show('slow'): $('.region2').hide();});

$("input[name='cntnt01fbrp__356']").click(function(){
    $("input[name='cntnt01fbrp__356']:checked").val() == 3 ? $('.region3').show('slow'): $('.region3').hide();});

});

[/glow]

#hideit: calling the Class of the Form
.regionx: calling the Class of the hidden fields
val() == 1 or 2 or 3 : calling the value assigned by formbuilder sequentially to each option of the Radio Button Group

The first part of the script hides all the to be hidden fields on form load.
The second part:  $("input[name='cntnt01fbrp__356']").click(function(){
    $("input[name='cntnt01fbrp__356']:checked").val() == 3 ? $('.region3').show('slow'): $('.region3').hide();});
defines the field name (cntnt....)  assigned by formbuilder
defines the value (1, 2 or 3) again assigned by formbuilder sequentially for the selected Radio Button
show : if checked show
: else
hide: if else hide


Hope this helps

Zack

[zbibas]

Small detail:

Your template needs to include the following between the head tags:





Zack

[clj83]

Hey,

That's great I was just thinking about doing something like that. Do you have a working example?

Cheers

Chris

[zbibas]

Check example on test page (a lot of garbage here.... ):http://www.woman.ch/index.php?page=testing&hl=en_EN
The 1st 3 radios are about hiding and showing. The working example WILL (not there yet) be on: http://www.woman.ch/index.php?page=online-registration&hl=en_US. A lot of conditional here...

Later this week end I'll post Custom Pulldowns of all the countries divided in continents.
Instead of making one big array Pulldown of all the countries separated by continent I am making 5 separate (5 continents, right?) pulldowns.
I have to delve into the..class.php files

[zbibas]

Took out the tres page check later on Sunday the Deployed form

Cheers

[Larry]

Nice guide. Good job!

[RepublicOfDave]

Thanks for posting this zbibas! really handy thing to know,

Was just wondering if you knew how to link the radio button selections to e-mail address that the form results will send to,

and if not maybe how I could incorporate this into the 'Email Results Based on Pulldown' field type?

Any help would be great,

Cheers

[LCarson]

Thanks, works great