copying out Hierarchical Select terms into other textboxes

Question

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.

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

Please advise, Thank you

Answer 1

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'.