通过动态字段中的动态复选框复制地址 [英] copy address by dynamic check boxes in dynamic fields
本文介绍了通过动态字段中的动态复选框复制地址的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的网站的一种形式具有地址字段，总共4个.
现在我想做的是，当用户输入地址详细信息时，会为用户提供动态选项，用户可以通过该选项动态生成新的地址"字段.
在每一代地址字段中，也都具有动态的复选框"选项，因此我尝试使用它，就像用户单击用户创建的第一个条目的复选框应复制到动态创建的新字段一样.
那么我该如何实现呢?到目前为止，我已经做到了
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>
除了此代码外，这里还有我在其中运行此代码的实时网站表单: http://sageaccountants.biz/authority-to-set-up-a-family-trust/
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/
推荐答案
此代码段与您在网站中尝试执行的操作最接近.它作用于定居者详细信息"中提供的ID模式.每次用户单击(+)"链接时，它都会在所有新的复选框元素上注册事件处理程序.
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.
此代码中唯一不存在的部分是动态创建地址块".我对该部分进行了模拟测试，以确保其固定到位.另外，您可能想为第一个地址"字段找到更好的ID.
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>
这篇关于通过动态字段中的动态复选框复制地址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
