Skip to content Skip to sidebar Skip to footer
Home / Javascript / Jquery

Copy Address By Dynamic Check Boxes In Dynamic Fields

Post a Comment
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 generat

Solution 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><metacharset="UTF-8"><html><head><scriptsrc="js/jquery.min.js"></script><scripttype='text/javascript'>functionregister_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);
      }
   });
}

functionregister_observer() {
   varMutationObserver = window.MutationObserver || window.WebKitMutationObserver;
   var myObserver       = newMutationObserver (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);});
   functionmutationHandler(mutationRecords){
      console.log("Observer called");
      register_eventhandlers();
   }
}

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

</script></head><body><div><liid="field_15_95"class="gfield field_sublabel_below field_description_below"><labelclass="gfield_label gfield_label_before_complex"for="input_15_95_1">Address</label><divclass="ginput_complex ginput_container has_street has_street2 has_state has_zip ginput_container_address gfield_trigger_change"id="input_15_95"><spanclass="ginput_full address_line_1"id="input_15_95_1_container"><inputname="input_95.1"id="input_15_95_1"value=""tabindex="50"type="text"/><labelfor="input_15_95_1"id="input_15_95_1_label">Address:</label></span><spanclass="ginput_full address_line_2"id="input_15_95_2_container"><inputname="input_95.2"id="input_15_95_2"value=""tabindex="51"type="text"/><labelfor="input_15_95_2"id="input_15_95_2_label">Suburb:</label></span><spanclass="ginput_right address_state"id="input_15_95_4_container"><inputname="input_95.4"id="input_15_95_4"value=""tabindex="54"type="text"/><labelfor="input_15_95_4"id="input_15_95_4_label">State / Province / Region</label></span><spanclass="ginput_left address_zip"id="input_15_95_5_container"><inputname="input_95.5"id="input_15_95_5"value=""tabindex="55"type="text"/><labelfor="input_15_95_5"id="input_15_95_5_label">ZIP / Postal Code</label></span><inputclass="gform_hidden"name="input_95.6"id="input_15_95_6"value=""type="hidden"/><divclass="gf_clear gf_clear_complex"/></div></li><lidata-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"><labelclass="gfield_label"/><divclass="ginput_container ginput_container_checkbox"><ulclass="gfield_checkbox"id="input_15_74"><liclass="gchoice_15_74_1"><inputdata-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"/><labelfor="choice_15_74_1-2-2"id="label_15_74_1">Same as first address</label></li></ul></div></li><liwhatever="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"><labelclass="gfield_label gfield_label_before_complex"for="input_15_22_1-2-2">Address</label><divclass="ginput_complex ginput_container has_street has_street2 has_state has_zip ginput_container_address gfield_trigger_change"id="input_15_22"><spanclass="ginput_full address_line_1"id="input_15_22_1_container"><inputdata-repeater-inputid="1"name="input_22.1-2-2"id="input_15_22_1-2-2"value=""tabindex="29"type="text"/><labelfor="input_15_22_1-2-2"id="input_15_22_1_label">Street Address</label></span><spanclass="ginput_full address_line_2"id="input_15_22_2_container"><inputdata-repeater-inputid="2"name="input_22.2-2-2"id="input_15_22_2-2-2"value=""tabindex="29"type="text"/><labelfor="input_15_22_2-2-2"id="input_15_22_2_label">Address Line 2</label></span><spanclass="ginput_right address_state"id="input_15_22_4_container"><inputdata-repeater-inputid="3"name="input_22.4-2-2"id="input_15_22_4-2-2"value=""tabindex="29"type="text"/><labelfor="input_15_22_4-2-2"id="input_15_22_4_label">State / Province / Region</label></span><spanclass="ginput_left address_zip"id="input_15_22_5_container"><inputdata-repeater-inputid="4"name="input_22.5-2-2"id="input_15_22_5-2-2"value=""tabindex="29"type="text"/><labelfor="input_15_22_5-2-2"id="input_15_22_5_label">ZIP / Postal Code</label></span><inputtabindex="29"data-repeater-inputid="5"class="gform_hidden"name="input_22.6-2-2"id="input_15_22_6-2-2"value=""type="hidden"/><divclass="gf_clear gf_clear_complex"/></div></li><lidata-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"><labelclass="gfield_label"/><divclass="ginput_container ginput_container_checkbox"><ulclass="gfield_checkbox"id="input_15_74"><liclass="gchoice_15_74_1"><inputdata-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"/><labelfor="choice_15_74_1-2-3"id="label_15_74_1">Same as first address</label></li></ul></div></li><lidata-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"><labelclass="gfield_label gfield_label_before_complex"for="input_15_22_1-2-3">Address</label><divclass="ginput_complex ginput_container has_street has_street2 has_state has_zip ginput_container_address gfield_trigger_change"id="input_15_22"><spanclass="ginput_full address_line_1"id="input_15_22_1_container"><inputdata-repeater-inputid="1"name="input_22.1-2-3"id="input_15_22_1-2-3"value=""tabindex="29"type="text"/><labelfor="input_15_22_1-2-3"id="input_15_22_1_label">Street Address</label></span><spanclass="ginput_full address_line_2"id="input_15_22_2_container"><inputdata-repeater-inputid="2"name="input_22.2-2-3"id="input_15_22_2-2-3"value=""tabindex="29"type="text"/><labelfor="input_15_22_2-2-3"id="input_15_22_2_label">Address Line 2</label></span><spanclass="ginput_right address_state"id="input_15_22_4_container"><inputdata-repeater-inputid="3"name="input_22.4-2-3"id="input_15_22_4-2-3"value=""tabindex="29"type="text"/><labelfor="input_15_22_4-2-3"id="input_15_22_4_label">State / Province / Region</label></span><spanclass="ginput_left address_zip"id="input_15_22_5_container"><inputdata-repeater-inputid="4"name="input_22.5-2-3"id="input_15_22_5-2-3"value=""tabindex="29"type="text"/><labelfor="input_15_22_5-2-3"id="input_15_22_5_label">ZIP / Postal Code</label></span><inputtabindex="29"data-repeater-inputid="5"class="gform_hidden"name="input_22.6-2-3"id="input_15_22_6-2-3"value=""type="hidden"/><divclass="gf_clear gf_clear_complex"/></div></li></div></body></html>

Solution 2:

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

Solution 3:

(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'>
   functionregister_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);
               }
            });
         });
      }

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

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

Post a Comment for "Copy Address By Dynamic Check Boxes In Dynamic Fields"