copy address by dynamic check boxes in dynamic fields

Question

My site's one of form has address fields, 4 in total.
now what i'm trying to do is when user input address details there are dynamic option given to user by which user can generate new "Address" fields dynamically.
By each generation of address fields there is dynamic "checkbox" option too, so i was trying to do work with it like if user clicks that checkbox the first entry user made should gets copied to the newly fields user created dynamically. So how do i achieve that ? so far i have done it like

<script type='text/javascript'>

    jQuery(document).ready(function(){

    alert('jqyert working');


     //these are fields user entered at first
      var address    = jQuery('#input_1_5_1').val();
      var address_2  = jQuery('#input_1_5_2').val();
      var state      = jQuery('#input_1_5_4').val();
      var region     = jQuery('#input_1_5_5').val();
      console.log(address+" "+address_2+" "+state+" "+region);

    jQuery('*[id^=choice_15_74_1-2-]').change(function(){
    jQuery("*[id^=choice_15_74_1-2-]").each(function(){

     if(jQuery(this).is(":checked")) {

     alert('check box got hit');
     //this alert doesn't even run

      jQuery('*[id^=input_15_22_1-2-]').val(address);
      jQuery('*[id^=input_15_22_2-2-]').val(address_2);

      jQuery('*[id^=input_15_22_4-2-]').val(state);
      jQuery('*[id^=input_15_22_5-2-]').val(region);

    }
    });

    });

    });

    </script>

why does the second block doesn't work ?
***********************************EDIT**********************************

Fields from where i want my data to be copied

<div class='ginput_complex ginput_container has_street has_street2 has_state has_zip ginput_container_address gfield_trigger_change' id='input_15_5' >
   <span class='ginput_full address_line_1' id='input_15_5_1_container' >
       <input type='text' name='input_5.1' id='input_15_5_1' value='' tabindex='4'  />
       <label for='input_15_5_1' id='input_15_5_1_label' >Street Address</label>
    </span><span class='ginput_full address_line_2' id='input_15_5_2_container' >
        <input type='text' name='input_5.2' id='input_15_5_2' value='' tabindex='5'  />
        <label for='input_15_5_2' id='input_15_5_2_label' >Address Line 2</label>
        </span><span class='ginput_right address_state' id='input_15_5_4_container' >
        <input type='text' name='input_5.4' id='input_15_5_4' value='' tabindex='8'    />
        <label for='input_15_5_4' id='input_15_5_4_label' >State / Province / Region</label>
   </span>
   <span class='ginput_left address_zip' id='input_15_5_5_container' >
         <input type='text' name='input_5.5' id='input_15_5_5' value='' tabindex='9'  />
         <label for='input_15_5_5' id='input_15_5_5_label' >ZIP / Postal Code</label>
    </span>
         <input type='hidden' class='gform_hidden' name='input_5.6' id='input_15_5_6' value='Australia'/>
  <div class='gf_clear gf_clear_complex'></div>

Fields to where i want my data to be copied (Note: these fields are dynamic, checkbox are dynamic too)

<input name='input_67.1' type='checkbox'  value='Same as first address'  id='choice_15_67_1' tabindex='18'  />
        <label for='choice_15_67_1' id='label_15_67_1'>Same as first address</label>
        <label class='gfield_label gfield_label_before_complex' for='input_15_12_1' >Address</label>    
          <div class='ginput_complex ginput_container has_street has_street2 has_state has_zip ginput_container_address gfield_trigger_change' id='input_15_12' >
               <span class='ginput_full address_line_1' id='input_15_12_1_container' >
               <input type='text' name='input_12.1' id='input_15_12_1' value='' tabindex='19'  />
               <label for='input_15_12_1' id='input_15_12_1_label' >Street Address</label>
               </span>
               <span class='ginput_full address_line_2' id='input_15_12_2_container' >
               <input type='text' name='input_12.2' id='input_15_12_2' value='' tabindex='20'  />
               <label for='input_15_12_2' id='input_15_12_2_label' >Address Line 2</label>
               </span>
               <span class='ginput_right address_state' id='input_15_12_4_container' >
               <input type='text' name='input_12.4' id='input_15_12_4' value='' tabindex='23'    />
               <label for='input_15_12_4' id='input_15_12_4_label' >State / Province / Region</label>
               </span>
               <span class='ginput_left address_zip' id='input_15_12_5_container' >
               <input type='text' name='input_12.5' id='input_15_12_5' value='' tabindex='24'  />
               <label for='input_15_12_5' id='input_15_12_5_label' >ZIP / Postal Code</label>
               </span>
               <input type='hidden' class='gform_hidden' name='input_12.6' id='input_15_12_6' value=''/>
             <div class='gf_clear gf_clear_complex'></div>

Apart from this code here is the live site form on which i have run this code: http://sageaccountants.biz/authority-to-set-up-a-family-trust/

Answer 1

This code snippet most closely matches with what you are trying to do in your website. It acts on the ID patterns provided in the "Settler Details". Every time, the user clicks the "(+)" link, it registers the event handlers on all the new checkbox elements.

The only part that is not present in this code is "creating address block dynamically". I mock-tested that part to make sure that it falls in place. Also you may want to find better IDs for the fields for "First Address".

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<script src="js/jquery.min.js"></script>
<script type='text/javascript'>
function register_eventhandlers() {

   /* Handler on checkboxes.
      When checkbox is selected, find it's parent LI iterm,
      navigate to it's sibling element (address block).
      Populate the input fields in the address block.
   */
   jQuery("[data-repeater-inputid][id*='choice_'][type='checkbox']").change(function(){
      console.log("Inside checkbox handler - 1");
      if (jQuery(this).prop('checked')) {
         console.log("Checked is selected");
         var addr_block=jQuery(this).closest("[data-repeater-childid][data-repeater-repeatid][data-repeater-parentid].gfield").next();
         if (addr_block) {
             console.log("Address Block (LI) found");
             console.log(addr_block);
         }

         var gform      = jQuery("form[id^='gform_']");
         var gform_body = gform.find(".gform_body");
         var inputs     = jQuery("form[id^='gform_'] > .gform_body input");
         var address_1  = inputs.eq(2).val();
         var address_2  = inputs.eq(3).val();
         var state      = inputs.eq(4).val();
         var region     = inputs.eq(5).val();

         console.log("gform:"); console.log(gform);
         console.log("gform_body:"); console.log(gform_body);
         console.log("inputs:"); console.log(inputs);
         console.log("Address Fields="+address_1+":"+address_2+":"+state+":"+region);

         addr_block.find("[data-repeater-inputid='1']").val(address_1);
         addr_block.find("[data-repeater-inputid='2']").val(address_2);
         addr_block.find("[data-repeater-inputid='3']").val(state);
         addr_block.find("[data-repeater-inputid='4']").val(region);
      }
   });
}

function register_observer() {
   var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
   var myObserver       = new MutationObserver (mutationHandler);
   var obsConfig        = { childList: true, characterData: true, attributes: true, subtree: true };

   console.log("Inside register_observer");
   jQuery(".gform_body").each (function(){ myObserver.observe (this, obsConfig);});
   function mutationHandler(mutationRecords){
      console.log("Observer called");
      register_eventhandlers();
   }
}

jQuery(document).ready(function(){
   register_observer();
   register_eventhandlers();
});

</script>
</head>
<body>
<div>

    <li id="field_15_95" class="gfield field_sublabel_below field_description_below">
        <label class="gfield_label gfield_label_before_complex" for="input_15_95_1">Address</label>
        <div class="ginput_complex ginput_container has_street has_street2 has_state has_zip ginput_container_address gfield_trigger_change" id="input_15_95">
            <span class="ginput_full address_line_1" id="input_15_95_1_container">
                <input name="input_95.1" id="input_15_95_1" value="" tabindex="50" type="text"/>
                <label for="input_15_95_1" id="input_15_95_1_label">Address:</label>
            </span>
            <span class="ginput_full address_line_2" id="input_15_95_2_container">
                <input name="input_95.2" id="input_15_95_2" value="" tabindex="51" type="text"/>
                <label for="input_15_95_2" id="input_15_95_2_label">Suburb:</label>
            </span>
            <span class="ginput_right address_state" id="input_15_95_4_container">
                <input name="input_95.4" id="input_15_95_4" value="" tabindex="54" type="text"/>
                <label for="input_15_95_4" id="input_15_95_4_label">State / Province / Region</label>
            </span>
            <span class="ginput_left address_zip" id="input_15_95_5_container">
                <input name="input_95.5" id="input_15_95_5" value="" tabindex="55" type="text"/>
                <label for="input_15_95_5" id="input_15_95_5_label">ZIP / Postal Code</label>
            </span>
            <input class="gform_hidden" name="input_95.6" id="input_15_95_6" value="" type="hidden"/>
            <div class="gf_clear gf_clear_complex"/>
        </div>
    </li>

  <li data-repeater-childid="2" data-repeater-repeatid="2" data-repeater-parentid="2" id="field_15_74-2-2" class="gfield copy-input_1_5_1-to-input_1_12_1 field_sublabel_below field_description_below gf_repeater_child_field">
    <label class="gfield_label"/>
    <div class="ginput_container ginput_container_checkbox">
      <ul class="gfield_checkbox" id="input_15_74">
        <li class="gchoice_15_74_1">
          <input data-repeater-inputid="1" name="input_74.1-2-2" value="Same as first address" id="choice_15_74_1-2-2" tabindex="29" type="checkbox"/>
          <label for="choice_15_74_1-2-2" id="label_15_74_1">Same as first address</label>
        </li>
      </ul>
    </div>
  </li>
  <li whatever="1" data-repeater-childid="3" data-repeater-repeatid="2" data-repeater-parentid="2" id="field_15_22-2-2" class="gfield field_sublabel_below field_description_below gf_repeater_child_field">
    <label class="gfield_label gfield_label_before_complex" for="input_15_22_1-2-2">Address</label>
    <div class="ginput_complex ginput_container has_street has_street2 has_state has_zip ginput_container_address gfield_trigger_change" id="input_15_22">
      <span class="ginput_full address_line_1" id="input_15_22_1_container">
        <input data-repeater-inputid="1" name="input_22.1-2-2" id="input_15_22_1-2-2" value="" tabindex="29" type="text"/>
        <label for="input_15_22_1-2-2" id="input_15_22_1_label">Street Address</label>
      </span>
      <span class="ginput_full address_line_2" id="input_15_22_2_container">
        <input data-repeater-inputid="2" name="input_22.2-2-2" id="input_15_22_2-2-2" value="" tabindex="29" type="text"/>
        <label for="input_15_22_2-2-2" id="input_15_22_2_label">Address Line 2</label>
      </span>
      <span class="ginput_right address_state" id="input_15_22_4_container">
        <input data-repeater-inputid="3" name="input_22.4-2-2" id="input_15_22_4-2-2" value="" tabindex="29" type="text"/>
        <label for="input_15_22_4-2-2" id="input_15_22_4_label">State / Province / Region</label>
      </span>
      <span class="ginput_left address_zip" id="input_15_22_5_container">
        <input data-repeater-inputid="4" name="input_22.5-2-2" id="input_15_22_5-2-2" value="" tabindex="29" type="text"/>
        <label for="input_15_22_5-2-2" id="input_15_22_5_label">ZIP / Postal Code</label>
      </span>
      <input tabindex="29" data-repeater-inputid="5" class="gform_hidden" name="input_22.6-2-2" id="input_15_22_6-2-2" value="" type="hidden"/>
      <div class="gf_clear gf_clear_complex"/>
    </div>
  </li>


  <li data-repeater-childid="2" data-repeater-repeatid="3" data-repeater-parentid="2" id="field_15_74-2-3" class="gfield copy-input_1_5_1-to-input_1_12_1 field_sublabel_below field_description_below gf_repeater_child_field">
    <label class="gfield_label"/>
    <div class="ginput_container ginput_container_checkbox">
      <ul class="gfield_checkbox" id="input_15_74">
        <li class="gchoice_15_74_1">
          <input data-repeater-inputid="1" name="input_74.1-2-3" value="Same as first address" id="choice_15_74_1-2-3" tabindex="29" type="checkbox"/>
          <label for="choice_15_74_1-2-3" id="label_15_74_1">Same as first address</label>
        </li>
      </ul>
    </div>
  </li>
  <li data-repeater-childid="3" data-repeater-repeatid="3" data-repeater-parentid="2" id="field_15_22-2-3" class="gfield field_sublabel_below field_description_below gf_repeater_child_field">
    <label class="gfield_label gfield_label_before_complex" for="input_15_22_1-2-3">Address</label>
    <div class="ginput_complex ginput_container has_street has_street2 has_state has_zip ginput_container_address gfield_trigger_change" id="input_15_22">
      <span class="ginput_full address_line_1" id="input_15_22_1_container">
        <input data-repeater-inputid="1" name="input_22.1-2-3" id="input_15_22_1-2-3" value="" tabindex="29" type="text"/>
        <label for="input_15_22_1-2-3" id="input_15_22_1_label">Street Address</label>
      </span>
      <span class="ginput_full address_line_2" id="input_15_22_2_container">
        <input data-repeater-inputid="2" name="input_22.2-2-3" id="input_15_22_2-2-3" value="" tabindex="29" type="text"/>
        <label for="input_15_22_2-2-3" id="input_15_22_2_label">Address Line 2</label>
      </span>
      <span class="ginput_right address_state" id="input_15_22_4_container">
        <input data-repeater-inputid="3" name="input_22.4-2-3" id="input_15_22_4-2-3" value="" tabindex="29" type="text"/>
        <label for="input_15_22_4-2-3" id="input_15_22_4_label">State / Province / Region</label>
      </span>
      <span class="ginput_left address_zip" id="input_15_22_5_container">
        <input data-repeater-inputid="4" name="input_22.5-2-3" id="input_15_22_5-2-3" value="" tabindex="29" type="text"/>
        <label for="input_15_22_5-2-3" id="input_15_22_5_label">ZIP / Postal Code</label>
      </span>
      <input tabindex="29" data-repeater-inputid="5" class="gform_hidden" name="input_22.6-2-3" id="input_15_22_6-2-3" value="" type="hidden"/>
      <div class="gf_clear gf_clear_complex"/>
    </div>
  </li>

</div>
</body>
</html>

Answer 2

(After reading your comment "what do we do for dynamic fields?")

1) Your IDs seem to be different in js-code vs html-code. I modified js-code to make them match.

2) You are trying to read addresses before the user types them in, thus they have no values in them, yet. I moved them into a event handler so that we read values only when the user selects the checkbox.

3) You are trying to register event handlers on address fields, even before the corresponding html elements are actually created. Do you have a button, by clicking which, the user gets to create new addresses? If so, you could also call my "register_eventhandlers" immediately after creating the said new addresses.

4) Since, I am not sure if "creating new addresses" is under your control, I wrote a register_observer (not a nice way of doing things) to listen to changes in DOM and register event handlers on-the-fly. If you use this method (instead of the button mentioned above), you may want to listen on mutation events on a specific div rather than do it inefficiently on body as I have done.

5) I am not sure what is a pattern in the IDs generated. If you know the pattern, you can modify the patterns in js-code.

<script type='text/javascript'>
   function register_eventhandlers() {
     var address_1  = jQuery('#input_15_5_1').val();
     var address_2  = jQuery('#input_15_5_2').val();
     var state     = jQuery('#input_15_5_4').val();
     var region    = jQuery('#input_15_5_5').val();
     console.log(address_1+" "+address_2+" "+state+" "+region);

         jQuery("*[id^='choice_15_67_1']").change(function(){
            jQuery("*[id^='choice_15_67_1']").each(function(){
               if(jQuery(this).is(":checked")) {
                  alert('check box got hit');
                  jQuery("*[id^='input_15_12_1']").val(address_1);
                  jQuery("*[id^='input_15_12_2']").val(address_2);
                  jQuery("*[id^='input_15_12_4']").val(state);
                  jQuery("*[id^='input_15_12_5']").val(region);
               }
            });
         });
      }

      function register_observer() {
            var MutationObserver   = window.MutationObserver || window.WebKitMutationObserver;
            var myObserver        = new MutationObserver (mutationHandler);
            var obsConfig         = { childList: true, characterData: true, attributes: true, subtree: true };
            $("body").each ( function () {
                  myObserver.observe (this, obsConfig);
            } );
            function mutationHandler(mutationRecords) {
                  console.info ("mutationHandler");
                  register_eventhandlers();
            }
      }

   jQuery(document).ready(function(){
         register_eventhandlers();
         register_observer();
   });
</script>

Answer 3

When the checkbox is clicked, the first address (four fields) should get copied to the second address (four fields).

Since you may not have fine-grained control over generated id/name/class fields in html, my solution may/mayn't be suitable for your need. Try it and see.

I didn't change html. I only changed code inside your $jQuery(document).ready() call.

$(function(){
    $("#choice_15_67_1").change(function(){
        if ($(this).is(":checked")) {
            $("[name='input_12.1']").val($("[name='input_5.1']").val());
            $("[name='input_12.2']").val($("[name='input_5.2']").val());
            $("[name='input_12.4']").val($("[name='input_5.4']").val());
            $("[name='input_12.5']").val($("[name='input_5.5']").val());
        }
     });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class='ginput_complex ginput_container has_street has_street2 has_state has_zip ginput_container_address gfield_trigger_change' id='input_15_5' >
    <span class='ginput_full address_line_1' id='input_15_5_1_container' >
    <input type='text' name='input_5.1' id='input_15_5_1' value='' tabindex='4'  />
    <label for='input_15_5_1' id='input_15_5_1_label' >Street Address</label>
    </span><span class='ginput_full address_line_2' id='input_15_5_2_container' >
    <input type='text' name='input_5.2' id='input_15_5_2' value='' tabindex='5'  />
    <label for='input_15_5_2' id='input_15_5_2_label' >Address Line 2</label>
    </span><span class='ginput_right address_state' id='input_15_5_4_container' >
    <input type='text' name='input_5.4' id='input_15_5_4' value='' tabindex='8'    />
    <label for='input_15_5_4' id='input_15_5_4_label' >State / Province / Region</label>
    </span>
    <span class='ginput_left address_zip' id='input_15_5_5_container' >
    <input type='text' name='input_5.5' id='input_15_5_5' value='' tabindex='9'  />
    <label for='input_15_5_5' id='input_15_5_5_label' >ZIP / Postal Code</label>
    </span>
    <input type='hidden' class='gform_hidden' name='input_5.6' id='input_15_5_6' value='Australia'/>
    <div class='gf_clear gf_clear_complex'></div>
    <input name='input_67.1' type='checkbox'  value='Same as first address'  id='choice_15_67_1' tabindex='18'  />
    <label for='choice_15_67_1' id='label_15_67_1'>Same as first address</label>
    <label class='gfield_label gfield_label_before_complex' for='input_15_12_1' >Address</label>    
    <div class='ginput_complex ginput_container has_street has_street2 has_state has_zip ginput_container_address gfield_trigger_change' id='input_15_12' >
        <span class='ginput_full address_line_1' id='input_15_12_1_container' >
        <input type='text' name='input_12.1' id='input_15_12_1' value='' tabindex='19'  />
        <label for='input_15_12_1' id='input_15_12_1_label' >Street Address</label>
        </span>
        <span class='ginput_full address_line_2' id='input_15_12_2_container' >
        <input type='text' name='input_12.2' id='input_15_12_2' value='' tabindex='20'  />
        <label for='input_15_12_2' id='input_15_12_2_label' >Address Line 2</label>
        </span>
        <span class='ginput_right address_state' id='input_15_12_4_container' >
        <input type='text' name='input_12.4' id='input_15_12_4' value='' tabindex='23'    />
        <label for='input_15_12_4' id='input_15_12_4_label' >State / Province / Region</label>
        </span>
        <span class='ginput_left address_zip' id='input_15_12_5_container' >
        <input type='text' name='input_12.5' id='input_15_12_5' value='' tabindex='24'  />
        <label for='input_15_12_5' id='input_15_12_5_label' >ZIP / Postal Code</label>
        </span>
        <input type='hidden' class='gform_hidden' name='input_12.6' id='input_15_12_6' value=''/>
        <div class='gf_clear gf_clear_complex'></div>