3

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.

enter image description here

How can I do this?

  • 2
    You can go for jQuery to update the second field label with the value of first field option. – visabhishek Apr 11 '16 at 15:00
  • I keep wondering where you get the inspiration from about all such kind of special questions you keep coming up with ... Anyway, how many possible values ("option 1" being one of them) does your "Field One" have, only a few (say between 2 and 10 or so), or dozens (if not hundreds, which would be a nightmare of course if it would be implemented as a select list, instead of an auto complete)? – Pierre.Vriens Apr 11 '16 at 16:37
  • @Pierre.Vriens, I'm creating web bibliographies based on Drupal Framework (in different academic domains). I've already created 4 ones. Each of them have some similarities and some differences. Most of the questions I asked are coming from these stuff. :) // Yes, there are only 6 options. Thanks for your interest. – herci Apr 11 '16 at 16:55
2

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:

enter image description here

  • I've not experimented with this (yet), but assuming this works I'd say "Waw!". What isn't clear to me however is its relationship with the Seven theme: does this only workk for Seven? What if I'd use another theme? Can you add some more details about that in your answer? – Pierre.Vriens Apr 12 '16 at 5:21
  • @Pierre.Vriens updated answer. It will work with any admin theme. – No Sssweat Apr 12 '16 at 5:28
  • Aha, that makes more sense! And looking at the screenprint you added to the end, this seems pretty close (identical?) to what @herci asked for. Chapeau! – Pierre.Vriens Apr 12 '16 at 5:59
  • @Pierre.Vriens According to Google translate Chapeau = Hat ??? (O_o) – No Sssweat Apr 12 '16 at 6:04
  • 1
    @NoSssweat, thanks a lot. This is exactly what I need. I had tried a similar method but the JS structure I used was not correct. Thanks again. – herci Apr 12 '16 at 8:54
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.

  • Thanks, I'm already using the Conditional Fields but I couldn't split the field two, unfortunately. – herci Apr 11 '16 at 19:38
  • grrrrrrrrrrrr, that ruins the party, right? I suggest you somehow add that to your question. But I hope you don't mind I don't give up yet ... Can you (briefly) explain why you cannot split that fields two? Like what kind of other things would break (or would become unacceptable)? That might give me other inspiration for an alternative approach. – Pierre.Vriens Apr 11 '16 at 19:43
  • Yes, unfortunately. Because I use this field (second one) in Search API, with other dependencies etc. Hımm, maybe I will split this field and try to arrange each feature (search etc.) separately. But if I find a easy solution without needing separation of fields I will use it :) – herci Apr 11 '16 at 20:17
  • 1
    Hm, then I have another variation: keep your existing "Field Two" but make it invisible for the user (using some type of theming-technique), but use it to actually "store" the actual value specified in only 1 of those 6 extra fields. There may be multiple solutions to store that Field Two value, but for sure using Rules (event: before saving content, with action "set data value", etc) would work. What do you think, worth adding to my answer? – Pierre.Vriens Apr 11 '16 at 20:41
  • @Pierre.Vriens checkout my answer, I believe it's the better approach. – No Sssweat Apr 12 '16 at 5:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.