Home

Fix for Making conditional fields with Drupal, CCK, and jQuery.

April 23, 2010 - 12:12pm — Anonymous
  1. Making conditional fields with Drupal, CCK, and jQuery.
  2.  
  3. by MatteusX
  4.  
  5. I'll be posting this as a handbook page at Drupal.org.
  6.  
  7. The Conditional Fields (http://drupal.org/project/conditional_fields) module will work in many simple cases (using the basic CCK types) but if you are using more advanced types or want more control, keep reading.
  8.  
  9. In this example I have a CCK number field (displayed as a checkbox) which when checked will make a CCK text field visible.
  10.  
  11. The text field will not be required though, and to make it conditionally required is something I will hopefully cover at a later date.
  12.  
  13. I am working with the Page content type which Drupal comes with.
  14.  
  15. First I add my CCK fields to the Page content type:
  16.  
  17. Label: Membership (This won't appear in the form, but will appear in the node view)
  18. Field name: member (giving us a full field name of field_member)
  19. Type: integer
  20. Form element: Single on/off checkbox
  21.  
  22. Save, then change these additional values:
  23.  
  24. Allowed values:
  25.  
  26. 0|I am not a club member
  27. 1|I am a club member
  28.  
  29.  
  30. Now we want a conditional text field to ask for member number:
  31.  
  32. Label: Member number
  33. Field name: member_number (Giving us a full field name of field_member_number)
  34. Type: Text (I'm treating the member number as text)
  35. Form element: text field
  36.  
  37. Save, then save additional settings with no changes.
  38.  
  39. Go to add a new content type to see if the fields look correct.  Right now you'll see both fields, but we're about to change that.
  40.  
  41. We need to add some JavaScript to the page which will initially hide the text field and then show it when the checkbox is clicked.  We will use jQuery because it comes with Drupal and makes tasks like these easier to write and maintain.
  42.  
  43. There are a number of ways to add JavaScript in Drupal.  We can add JavaScript site-wide with an entry in our theme's themename.info file.  We could also add JavaScript to specific forms with a custom module that implements hook_form_alter and calls drupal_add_js.  This was traditionally my approach until I learned that JavaScript added via hook_form_alter will not be added back during form validation.  So, the JavaScript would run initially, but if there were validation errors then it would fail to be included.  For more information, this is described here http://www.appnovation.com/drupaladdjs-and-drupaladdcss-hookformalter-and-hookform-drupal-6.
  44.  
  45. So, like that link suggests we're going to handle this in our theme's template.php file like so:
  46.  
  47. MYTHEME is the name of your theme so replace it accordingly.
  48.  
  49. Implement hook_theme to register a theme function for "page_node_form" which is the form ID of the "Create Page" form.  If you're working with a different content type, like "product" then it would be "product_node_form" for you.  You can find the form ID by viewing the source in your browser, searching for "form_id" and finding the hidden field with that name.  It's value is the form ID.  For example, mine is:
  50.  
  51. <input type="hidden" name="form_id" id="edit-page-node-form" value="page_node_form"  />
  52.  
  53. So, my hook_theme is:
  54.  
  55. function MYTHEME_theme($existing, $type, $theme, $path) {
  56.   return array(
  57.     'page_node_form' => array(
  58.       'arguments' => array('form' => NULL),
  59.     ),
  60.   );
  61. }
  62.  
  63. Also, be aware that if your theme already has a hook_theme implementation you will want to add this entry to the existing array.
  64.  
  65. Now we need to create that theme function we just defined.  Again, replace MYTHEME with the name of your theme:
  66.  
  67. function MYTHEME_page_node_form($form) {
  68.   drupal_add_js(path_to_theme() . '/test.js');
  69.   return drupal_render($form);
  70. }
  71.  
  72. And here at last we call drupal_add_js to look for a file called test.js in the current theme's directory.
  73.  
  74. Save your template.php and go make this test.js file in the same directory.
  75.  
  76. In test.js put the following for now:
  77.  
  78. Drupal.behaviors.page_node_form = function() {
  79.   alert('test');
  80. };
  81.  
  82. I chose the name page_node_form here - it could be anything and definitely has no connection to the form ID.  Using Drupal.behaviors is always a good idea, you can read more about it here: ??
  83.  
  84. Save test.js.  Now we have to clear the template cache (go to admin/settings/performance and click clear cached data button).  Or clear the template cache by using the admin_menu and devel modules which is what I prefer to do.
  85.  
  86. Finally, you can visit the create content page for your content type and you should get an alert message that says test.  Click submit with everything blank to cause a validation failure, and you should still get an alert message.
  87.  
  88. Now we have our JavaScript in place and can start writing that.  
  89.  
  90. jQuery uses CSS identifiers heavily, so we'll need to know the ID of the actual checkbox as well as the ID of the div which wraps our text field.  Firefox's Firebug is great for this, and in my case my checkbox looks like:
  91.  
  92. <input type="checkbox" class="form-checkbox" value="1" id="edit-field-member-value" name="field_member[value]">
  93.  
  94. So, the ID is edit-field-member-value.
  95.  
  96. When checked, I don't just want to hide the text input field but the label and the div which wraps it.  I want to hide all of this:
  97.  
  98. <div id="edit-field-member-number-0-value-wrapper" class="form-item">
  99.  <label for="edit-field-member-number-0-value">Member number: </label>
  100.  <input type="text" class="form-text text" value="" size="60" id="edit-field-member-number-0-value" name="field_member_number[0][value]">
  101. </div>
  102.  
  103. and the ID which is assigned to that outer div is edit-field-member-number-0-value-wrapper.
  104.  
  105. Now we can write the JS.  Open up test.js and replace it with:
  106.  
  107. Drupal.behaviors.page_node_form = function() {
  108.  
  109.   if (!$('#edit-field-member-value').is(':checked')) {    
  110.     $('#edit-field-member-number-0-value-wrapper').hide();
  111.   }
  112.  
  113.   $('#edit-field-member-value').click(function(e) {
  114.     if ($(this).is(':checked')) {
  115.       $('#edit-field-member-number-0-value-wrapper').show();
  116.     } else {
  117.       $('#edit-field-member-number-0-value-wrapper').hide();
  118.     }
  119.   });
  120.  
  121. };
  122.  
  123. Here's a breakdown of what is happening:
  124.  
  125. if (!$('#edit-field-member-value').is(':checked')) {    
  126.   $('#edit-field-member-number-0-value-wrapper').hide();
  127. }
  128. This hides the text field once the page loads but only if the checkbox is not checked.  If the checkbox defaults to unchecked then how could this happen?  It could happen during validation if the user has already checked the box.  In that case we want to show this conditional field.  Also, I'm avoiding hiding the field initially with CSS or at the theme level because this will degrade if JavaScript is disabled and still let the entire form work.
  129.  
  130. $('#edit-field-member-value').click(function(e) {
  131. This binds a click event to the checkbox itself.  The following 5 lines of code run when it's clicked.
  132.  
  133.     if ($(this).is(':checked')) {
  134.     We know the checkbox was clicked, but not what state that click has left it in.  This tests if it is now checked.
  135.  
  136.       $('#edit-field-member-number-0-value-wrapper').show();
  137.       This causes the text field (and its label and container) to become visible
  138.  
  139.       $('#edit-field-member-number-0-value-wrapper').hide();
  140.       If the checkbox is now unchecked then this hides the text field.
  141.  
  142. Finally, I like to add a little additional code so that when the checkbox gets unchecked the text field gets cleared out.  My final version of the test.js file is:
  143.  
  144. Drupal.behaviors.page_node_form = function() {
  145.  
  146.   if (!$('#edit-field-member-value').is(':checked')) {    
  147.     $('#edit-field-member-number-0-value-wrapper').hide();
  148.   }
  149.  
  150.   $('#edit-field-member-value').click(function(e) {
  151.     if ($(this).is(':checked')) {
  152.       $('#edit-field-member-number-0-value-wrapper').show();
  153.     } else {
  154.       $('#edit-field-member-number-0-value-wrapper').hide();
  155.       $('#edit-field-member-number-0-value').val('');
  156.     }
  157.   });
  158.  
  159. };
  160.  
  161. You'll find that this works in the Edit form as well.  Happy Drupaling!

Submit Fix

Any tags you'd like to associate with your code, delimitered by commas (example: Views, CCK, Module, etc).
Select the syntax highlighting mode to use.