0

I have one Hierarchical Select with 4 depth term. What I need is to copying out every depth term level to other fields/textboxes at the same form as described by the attached image.

And also, how can every time we change the Hierarchical Select value, it also should change the corresponding fields/textboxes.

Thank you for the help.

------------ extra information on the problem ------------------

@Yogesh

I have mininal knowledge on javascript/jquery, where to save the *.js file and how to call it properly.

I just read from one tutorial that it should save to a "js folder" and called it from the template .info file. So, following are two images that trying to tell you what I've been doing. Kindly help me to examine every detail of the images and hopefully you can tell where a did a wrong.

content structure isian.js script

and i call the script from /sites/all/themes/zen/zen.info with command: "scripts[] = js/isian.js"

Please advise, Thank you

0

You can use Drupal JavaScript API for setting the values of fields, based on selection made by user in Hierarchical Dropdown field.

The below sample code is for fixed number (3) of fields, you can further extend this to dynamically set the values of n number of fields using jQuery $.each().

(function($){
  Drupal.behaviors.exampleModule = {
    attach : function(context, settings) {
      // On hierarchy change event.
      $(".hierarchical-select .selects select").change(function(event) {
        updateFieldsValue();
      });

      function updateFieldsValue() {
        var First = $.trim($(".hierarchical-select .selects select[name='field_hierarchical_dropdown[und][hierarchical_select][selects][0]'] option:selected").text());
        var Second = $.trim($(".hierarchical-select .selects select[name='field_hierarchical_dropdown[und][hierarchical_select][selects][1]'] option:selected").text());
        var Third = $.trim($(".hierarchical-select .selects select[name='field_hierarchical_dropdown[und][hierarchical_select][selects][2]'] option:selected").text());

        // set value of Fields.
        $("input[name='field_prop_1[und][0][value]']").val(First);
        $("input[name='field_prop_2[und][0][value]']").val(Second);
        $("input[name='field_prop_3[und][0][value]']").val(Third);
      }

    }
  };
})(jQuery);

You can find more details about Drupal Behaviors on 'Better understanding of Drupal behaviors' and 'Understanding JavaScript behaviors in Drupal'.

  • Hello Yogesh, Thanks for the enlightment. I've tested your code but the change event didn't initiated. I tested it with alert message. Outside alert is working but not for inside alert. any other option to try? Thanks. – Bytra Aceh Sep 22 '16 at 13:34
  • I've tested above code in my Drupal Installation and it is working. Try changing "exampleModule" with your module name. Also make sure that the field name "field_hierarchical_dropdown" is correct. – Yogesh Sep 23 '16 at 5:10
  • kindly review the ------------ extra information on the problem ------------------ above. Thanks – Bytra Aceh Sep 23 '16 at 15:04

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.