Adding JavaScript to a Webform

Webform makes it very simple to add snippets of JavaScript to control the interaction of elements on a form. For example, fieldsets can be automatically opened or closed, or JavaScript validation can be performed.

There are generally two ways of adding JavaScript, inline or to the header of the page. The inline approach is easier, but inline JavaScript may slow down the rendering of the page as it gets executed while the page is loading. Adding JavaScript to the page header allows it to be executed after the page has finished rendering.

Inline JavaScript

For inline JavaScript, you only need to add a "Markup" component to your Webform. This allows you to enter any HTML code you want (including JavaScript) to the form. Add a new Markup component from the "Webform" tab with a label like "Custom JavaScript". Then in the text area for the content of the markup, enter your JavaScript surrounded by <script> tags such as this:

<script>
  alert('hello!');
</script>

Finally, make sure that your selected input format (usually Full HTML) won't filter out the script tag on output. You may need to be an administrator to use this option.

Adding JavaScript to the page header

First, read "THEMING.txt" in the webform module folder for an overview of theming Webform nodes. Then, use the following to add the JavaScript to your form.

1. Determine the Node ID of the form you wish to add the JavaScript to. If you aren't using the path module, it will be in the URL, such as "node/1". Otherwise, it's quickest just to hover over the node's edit link to see the NID in the URL.

Copy the webform-form.tpl.php file from the webform/templates directory to your theme's directory. If you want to theme one particular form, rename the file to "webform-form-NID.tpl.php" (where NID is the node's ID). In the top portion of the file add a line like this:

  drupal_add_js(path_to_theme() .'/scripts/SCRIPT_NAME.js');

2. Determine the elements you wish to interact with, and use jQuery to easily modify them. The following example expands a fieldset if either checkbox is enabled.
   

   $(document).ready(function () {
     $('#edit-submitted-contact-me-newsletter-signup').click(function () {
       if ($('#edit-submitted-contact-me-newsletter-signup').attr('checked') &&
           $('#webform-component-contact_information').is('.collapsed')) {
         Drupal.toggleFieldset('#webform-component-contact_information');
       }
     });
   
     $('#edit-submitted-contact-me-contact-me').click(function () {
       if ($('#edit-submitted-contact-me-contact-me').attr('checked') &&
           $('#webform-component-contact_information').is('.collapsed')) {
         Drupal.toggleFieldset('#webform-component-contact_information');
       }
     });
   });

3. In order for your new tpl.php file to have an effect, you must clear your Drupal caches on the Performance page of the admin interface.