Habib Rehman Habib Rehman - 1 month ago 11
Javascript Question

copy address by dynamic check boxes in dynamic fields

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

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() {             
      /*        
      var address_1 = $('#input_15_95_1').val();
      var address_2 = $('#input_15_95_2').val();
      var state     = $('#input_15_95_4').val();
      var region    = $('#input_15_95_5').val();            
      */

      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("Address Fields="+address_1+":"+address_2+":"+state+":"+region);

            /* 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.
            */
            $("[data-repeater-inputid][id*='choice_'][type='checkbox']").change(function(){
                if ($(this).prop('checked')) {          
                    console.log("Checked is selected");                 
                    var addr_block=$(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);}

                    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 };               

                $("body").each (function(){ myObserver.observe (this, obsConfig);});
                function mutationHandler(mutationRecords){register_eventhandlers();}
        }

    jQuery(document).ready(function(){
            register_eventhandlers();
            register_observer();
    });
</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>