Using jQuery to control CiviCRM form elements by Drupal role

jQuery is a versatile method of altering any HTML page. In CiviCRM we can use it to accomplish tasks that are impossible using custom templates or CSS.

Quite a common problem is how to expose different price sets on an event registration form. In this recipe we will use jQuery to show different price sets to users, depending if the logged–in user is a member of your organisation.

Getting ready

In this example we have a membership organization called Inner City Arts. We have enabled the CiviMember Roles Sync module. This module synchronizes membership status to a Drupal role. In this case, if an individual is a current member of Inner City Arts, then CiviMember Role Sync automatically assigns them the role of Member in Drupal. This means that when a member logs in, we can tell that they are a member of Inner City Arts because they have the Member role in Drupal. If you want to play around with jQuery and see how the components work, then use Firefox as your browser and install the Firebug extension.

How to do it

Let’s set up a price set for our event, and include prices for members and non–members.

Click to enlarge

Note that in the above example, both priceset items are showing. We want to General Public price to show to the anonymous user and the Inner City Arts Members price to show to logged in users who are Inner City Arts members. We accomplish that using jQuery.

Now let’s create a Drupal block and paste in the following piece of jQuery. We will make sure that the block text format is Full HTML. We also want to use the Drupal block visibility controls to make sure it is shown on the event page only to users who have the Drupal Member role. Now let’s create another block and paste in this piece of jQuery

We make sure that this block is visible to the anonymous user.

We can now test our event registration. If the user in anonymous, then the second block jQuery runs and the General Public price is displayed with the message for Inner City members to log in.

Click to enlarge

If the user is logged in then the first block jQuery runs and only the member price is displayed.

How it works

This technique requires that the priceset label for the members’ price contains the word ‘Members’. The first block of jQuery only runs if the user is logged in and has the Drupal role ‘member’. jQuery looks at the priceset and finds all those items with a ‘label’element that has does not contain the word ‘Members’. It checks that the label is attached to a form input and then removes the input and the label.

The effect of this is to remove the General Public priceset item. The second block does the reverse. It only runs for the anonymous user. jQuery finds all those items with a label that does contain the word ‘Members’ and removes the priceset items. The effect of this is to remove the member priceset item. It also adds in a reminder to members to login to get reduced ticket prices.

Note that this technique is not secure and that your page can be manipulated to that the member prices could become available.


Latest bits and bobs

jQuery is a versatile method of altering any HTML page. In CiviCRM we can use it to accomplish tasks that are impossible using custom templates or CSS.
Advanced Search only lets you search for a range of postal codes. What do you do if you want to search for lots of different postcodes at the same time?
CBD Research publish a lot of interesting and uniqie directories. We're working with them to bring their website offering up to date.