How to change a fields label name based on another fields value?

Question

I have a content type and it has two fields:

• Field One (select list)
• Field Two (text area)

What I want to do is to change Field Two's label name based on Field One's value in node add/edit page and node dipslay. If Option 1 selected in Field One field, then make the Field Two's label name Option 1 etc.

How can I do this?

Answer 1

Using jQuery is the way to do go.

Since when you edit nodes it uses the admin theme (seven), we need to add the jQuery to the admin theme (seven).

Note: The default admin theme for Drupal 7 is "Seven", if you have changed your admin theme, then just edit that theme instead.

Go to the folder drupal/themes/seven and edit seven.info

After stylesheets[screen][] = style.css add the following line

scripts[] = cool.js

Create cool.js inside the seven folder (path would be drupal/themes/seven/cool.js)

cool.js

(function ($) {

   (function Forever(){ // we create a function called Forever

   var grabselectedtext = $('#edit-field-test-und option:checked').text();

     $('label').each(function(){
      if ($(this).attr('for') == 'edit-body-und-0-value') {
  
         if (grabselectedtext != '- None -') {
           $(this).text(grabselectedtext);
         } else {
             $(this).text('Field Two');
           }
         }   

     });   

   setTimeout(Forever, 1);

   })();

})(jQuery);

In this example the select list field is named test and the field to change label is the body field.

---

The above does exactly what you asked, but perhaps it might be even better (depending on your use case) if you hide the body field if the test field is equal to None. Then if the person selects something the body field reveals itself by sliding down.

cool.js (option 2)

(function ($) {


  (function Forever(){ // we create a function called Forever

    var grabselectedtext = $('#edit-field-test-und option:checked').text();
    $('label').each(function(){
       if ($(this).attr('for') == 'edit-body-und-0-value') {
  
         if (grabselectedtext != '- None -') {
         $(this).text(grabselectedtext);
         $('#body-add-more-wrapper').slideDown(2000); // slides down in 2 seconds     
         } else {
           $(this).text('Field Two');
           $('#body-add-more-wrapper').slideUp(2000); // slides up in 2 seconds
          }
     }   

    });   

  setTimeout(Forever, 1); 

  })();

})(jQuery);

Then add this CSS to Seven's style.css

#body-add-more-wrapper { display: none; }

PS: Not a good idea to use the body field for this, better create your own custom field, otherwise all body fields will be hidden. I didn't because I was lazy as this is just for example purposes.

Result:

Answer 2

Consider using the Conditional Fields module. Excerpt from its project page:

Conditional Fields allows you to manage sets of dependencies between fields. When a field is “dependent”, it will only be available for editing and displayed if the state of the “dependee” field matches the right condition.

When editing a node (or any other entity type that supports fields, like users and categories), the dependent fields are dynamically modified with the States API.

You can, for example, define a custom “Article teaser" field that is shown only if a "Has teaser" checkbox is checked.

So if you have like 6 possible values (Option 1, ... Option 6), as in your comment below the question, you could create 6 fields with label "Option 1", ..., "Option 6".

Not sure if it is acceptable to "split" your "Field Two" in like 6 separated fields, but at least it would change the field labels as you are asking for.