Drupal 7.65 Webform需求：选择部门后自动关联显示对应人员至只读文本框

Alright, let's walk through how to build this dynamic Drupal 7 Webform exactly as you need it—keeping your role keys intact for historical records while auto-populating the correct contact person when a role is selected. Here's the step-by-step breakdown:

First, build out the two core fields in your Webform:

• Select List (Department Role): Use the key-value pairs you provided:

  business_manager|Business Manager
  hr_consultant|Human Resources
  training_developer|Training Developer
  

  Make note of this field's machine name (e.g., department_role)—you'll need it later for the JavaScript.
• Disabled Textfield (Contact Person): Add a regular textfield, then check the "Disabled" option under the field settings so users can't edit it. Grab its machine name too (e.g., contact_person).

Since Drupal 7 ships with jQuery, we'll use a small custom script to link the selected role to the contact name. This way, you can update the role-to-person mapping later without touching the Webform's select list values.

Option 1: Add via your theme (simplest for most cases) #

1. Open your active theme's template.php file (if you don't have one, create it in your theme folder).
2. Add this code to attach the script to your specific Webform:

   function YOUR_THEME_form_alter(&$form, &$form_state, $form_id) {
     // Replace 'webform_client_form_123' with your Webform's actual form ID (find it via browser dev tools)
     if ($form_id == 'webform_client_form_123') {
       $form['#attached']['js'][] = drupal_get_path('theme', 'YOUR_THEME') . '/js/webform-contact-mapping.js';
     }
   }
   

3. Create a js folder in your theme directory, then make a file named webform-contact-mapping.js with this code:

   (function ($) {
     Drupal.behaviors.webformContactMapping = {
       attach: function (context, settings) {
         // This is your role-to-person map—easy to update later!
         const roleContactMap = {
           'business_manager': 'Steve Abc',
           'hr_consultant': 'Gertrude Def',
           'training_developer': 'Sven Hgj Klm'
         };
   
         // Replace these IDs with your actual field IDs (inspect the form to find them)
         const $roleSelect = $('#edit-submitted-department-role', context);
         const $contactField = $('#edit-submitted-contact-person', context);
   
         // Set initial value if the select has a default option pre-selected
         if ($roleSelect.val()) {
           $contactField.val(roleContactMap[$roleSelect.val()]);
         }
   
         // Update the contact field whenever the role selection changes
         $roleSelect.on('change', function() {
           const selectedRole = $(this).val();
           $contactField.val(roleContactMap[selectedRole] || '');
         });
       }
     };
   })(jQuery);
   

   • Don't forget to replace YOUR_THEME with your theme's machine name, and update the field IDs to match your Webform's actual element IDs (you can find these by right-clicking the fields in your browser and choosing "Inspect").

Option 2: Add via a custom module (if you prefer theme-independent code) #

If you don't want to tie this to your theme, create a simple custom module:

1. Create a folder named webform_dynamic_contact in sites/all/modules/custom.
2. Make webform_dynamic_contact.info with:

   name = Webform Dynamic Contact Mapping
   description = Adds dynamic role-to-contact mapping for specific Webform
   core = 7.x
   package = Custom
   

3. Make webform_dynamic_contact.module with:

   <?php
   function webform_dynamic_contact_form_alter(&$form, &$form_state, $form_id) {
     if ($form_id == 'webform_client_form_123') { // Replace with your Webform's form ID
       $form['#attached']['js'][] = drupal_get_path('module', 'webform_dynamic_contact') . '/js/webform-contact-mapping.js';
     }
   }
   

4. Create a js subfolder in the module directory, add the same webform-contact-mapping.js file from Option 1.
5. Enable the module via Drupal's module admin page.

Here's the key part: since we're storing the role's machine key (like hr_consultant) in the select list's value, but the contact person's name is saved as the textfield's value when the form is submitted. That means:

• Old submissions will keep the contact name that was active when the user submitted the form.
• When you update the roleContactMap in the JS later, new submissions will use the updated name—no impact on existing records.

• Load your Webform, select different roles—you should see the contact person textfield update automatically.
• Submit the form, then view the submission to confirm the correct name is saved.
• Try updating the roleContactMap in the JS, refresh the form, and select a role—you'll see the new name, but old submissions still show the original one.

That's all! This setup meets all your requirements: dynamic auto-population, clean role keys for future flexibility, and intact historical data.

内容的提问来源于stack exchange，提问作者Tormy Van Cool