Many websites feature a degree of interactivity where the web page physically changes as we make various selections or click on buttons. Drupal 7 ships with the jQuery JavaScript Library preinstalled, thus making it easy for us to take advantage of this powerful toolkit.
In this exercise, we're going to change the way our Speaker Registration form appears on screen based upon the First name entry field. Currently, when a user first arrives at our form they are shown two fieldsets, one for Speaker Details and another for Presentation Details. We're going to hide the Presentation Details fieldset until such time as the user enters a first name and moves on to the Last name field. If a first name has been entered the Presentation Details fieldset will appear in slow animation. Should the user then delete the entered first name, the Presentation Details fieldset will be hidden again.
JavaScript and CSS can be used in conjunction to achieve some interesting effects.
- Our first step, using CSS, is to set the Presentation Details fieldset to be hidden by default. Let's open our
speakers.cssfile with a text editor, add the following code, and save the changes we have made:#webform-component-presentation-details { display: none; } - In the continuing spirit of being organized, let's create a folder to store our JavaScript file. Create a folder called
jsin thespeakersfolder so that we havesites/all/themes/speakers/js. - Next we'll enter the following the code into a new file called
check_name.jswhich we save into oursites/all/themes/speakers/jsfolder:(function ($) { $(window).load (function () { if ( $("#edit-submitted-speaker-details-first-name").val() != "" ) { $('#webform-component-presentation-details').show('slow'), } }); $(document).ready(function(){ $("#edit-submitted-speaker-details-first-name").blur (function() { if ( $("#edit-submitted-speaker-details-first-name").val() == "" ) { $('#webform-component-presentation-details').hide('slow'), } else { $('#webform-component-presentation-details').show('slow'), } }); }); })(jQuery); - As we saw with the
speakers.cssfile in the previous exercise, we need to tell our template to include our newcheck_name.jsfile. - Let's edit our
webform-form-NID.tpl.phpfile and add the following code just after the CSS line we added previously:// Custom JavaScript for Speaker Registration form. drupal_add_js(path_to_theme() . '/js/check_name.js'),
- After we have saved the changes to our
webform-form-NID.tpl.phpfile we need to navigate to our Appearance administrative page and to update the Drupal theme registry with our changes, then click on the Save configuration button. - Returning to our Speaker Registration form (be sure to refresh the page), we find that only the Speaker Details fieldset is initially visible.
- However, as soon as we enter a First name and press on the tab to move to Last name, the Presentation Details fieldset reappears.
The CSS rule we added to speakers.css instructs the web browser rendering engine to not display the HTML element that has the ID attribute value of webform-component-presentation-details (which is the ID of the Presentation Details fieldset). The Presentation title and Synopsis fields are automatically not displayed because they are contained within the element we are forcing to not display.
When the browser completes the action of loading the page, the first of our jQuery functions ($(window).load) will trigger. This function checks what the selected value is of the HTML element with the ID attribute of edit-submitted-speaker-details-first-name. If the value is not blank (that is, a name has been entered) then the hidden Presentation Details fieldset is made to show itself. This function is necessary to avoid the potential scenario where a user clicks on the Next Page > button while there are errors on the page. When the page reloads to display the validation error messages, the Presentation Details fieldset would be hidden from the user's view if no First name was yet selected, which could cause some consternation (until the user again enters a First name).
Our second jQuery function ($("select.#edit-submitted-speaker-details-first-name").change) fires when the user moves away from the HTML<input> element with the ID attribute of edit-submitted-speaker-details-first-name. If the new value is blank, the Presentation Details fieldset is once again hidden.
With CSS we can achieve a lot, as we saw in the previous exercise. Having the power of jQuery and JavaScript in conjunction with CSS enables us to achieve many more special effects.
It would be entirely inadequate to attempt summing up the power of jQuery in a few words, or even a few pages. We can learn everything we need to know from the documentation and tutorials available from the library's home page at http://jquery.com/. More information regarding adding JavaScript and jQuery to our Drupal themes and modules can be found at http://drupal.org/node/171213.
We may be surprised to note that when we edit a submission, the animation effects do not occur, nor are our CSS rules in effect. The reason for this is that our Drupal 7 website can be set up to use two themes: one for normal site visitors and another for administrators. The default Drupal configuration is to use the Seven theme for administrators, because it has been specifically designed to maximize the working area of the browser window for our convenience.
The reason why our animation does not work when we are logged in and editing submissions is that the CSS and JavaScript that makes it happen is part of our custom Speakers theme, and therefore does not apply while we're in administrator mode.
While we're on the subject of using JavaScript to show and hide fields based upon selection values, we may want to take a peek at the Webform Conditional project (http://drupal.org/project/webform_conditional) which we deal with in Chapter 12, Going Out of the Box. This module enables a similar kind of functionality as we included previously, but it offers the additional benefit of not flagging validation errors on mandatory components if they are currently conditioned to not be visible. It is functionally far more complete than our illustrative little 20-line hack.
Basically, this project narrows the conditional functionality we learned about in Chapter 4, Discovering More Components (in terms of multipage forms) to the scope of a single page.