Using jQuery to show and hide form elements by user choices

Sometimes, you may want to expose form elements depending on what previous choices a user has made. For example, you might run a conference over two days. If people only want to attend one day, you will only want to show them further options for that day.

How to do it…

This recipe shows you how to gain control of your event registration forms using jQuery.

1. Set up a pricelist for your event. Navigate to Administer | CiviContribute | New Price sets and create a new set.

2. In the new set, create a checkbox field so users can choose what days they want to attend:

   

3. Provide two choices: Monday and Tuesday.

4. Make the Amount column for each choice to be free.

5. Uncheck Display Amount. This presents the user with two checkboxes with no price display.

6. Add another checkbox field for further choices for Monday, to be used if the user selects Monday in the first field.

   

7. Provide the Lunch and Dinner options for Monday.

8. Repeat this for Tuesday.

9. Create an event...