通过动态字段中的动态复选框复制地址
copy address by dynamic check boxes in dynamic fields
我的网站有一个地址栏，总共4个。
现在我想做的是当用户输入地址详细信息时，有一个动态选项给用户，用户可以通过它动态地生成新的"地址"字段。
每一代的地址字段也有动态的"复选框"选项，所以我试图做的工作，就像如果用户点击复选框的第一个条目用户应该被复制到用户动态创建的新字段。那么我该怎么做呢?到目前为止，我都是这样做的
<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>
为什么第二个块不工作?
*********************************** 编辑 **********************************
字段从我想我的数据被复制
<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>
除了这段代码之外，这里是我运行这段代码的活动站点表单:http://sageaccountants.biz/authority-to-set-up-a-family-trust/
这个代码片段与你想在你的网站上做的事情最接近。它作用于"定居者详细信息"中提供的ID模式。每次用户单击"(+)"链接时，它都会在所有新的复选框元素上注册事件处理程序。
这段代码中唯一没有出现的部分是"动态创建地址块"。我对那部分进行了模拟测试，以确保它能到位。另外，你可能想为"第一个地址"的字段找到更好的id。
<!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>
当复选框被点击时，第一个地址(四个字段)应该被复制到第二个地址(四个字段)。
由于您可能没有细粒度控制生成的id/name/class字段在html中，我的解决方案可能/可能不适合您的需要。
我没有改变html。我只更改了您的$jQuery(document).ready()呼叫中的代码。
$(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>(看完你的评论"我们怎么处理动态字段?")
1)你的id似乎是不同的js代码与html代码。我修改了js-code使它们匹配。
2)你试图在用户输入地址之前读取它们，因此它们还没有值。我将它们移动到一个事件处理程序中，这样我们只在用户选中复选框时读取值。
3)你试图在地址字段上注册事件处理程序，甚至在相应的html元素实际创建之前。你是否有一个按钮，通过点击，用户可以创建新的地址?如果是这样，您也可以在创建上述新地址后立即调用我的"register_eventhandlers"。
4)既然，我不确定"创建新地址"是否在您的控制之下，我写了一个register_observer(不是一个很好的做事方式)来监听DOM中的变化并动态注册事件处理程序。如果您使用这种方法(而不是上面提到的按钮)，您可能希望在特定的div上侦听突变事件，而不是像我在body上那样低效地侦听。
5)我不确定生成的id中的模式是什么。如果您知道模式，就可以在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>
相关文章：
- 基于所选下拉列表值创建动态复选框
- 动态复选框onchange&javascript
- 从动态复选框的父级中提取类名
- LiveCycle:在动态复选框中循环
- 基于动态复选框过滤数据 角度 JS中的类别
- 使用 jQuery 获取动态复选框值
- 通过在 DOJO 中迭代 JSONArray 来创建动态复选框
- 动态复选框创建以在单击时运行函数
- 动态复选框被重置
- 通过javascript访问(checkall，uncheck，middlestate）到asp表中的动态复选框
- 添加为动态复选框选中的属性
- 动态复选框列表的JavaScript验证
- 如何使用ng模型绑定动态复选框值
- 将鼠标悬停效果添加到动态复选框
- 动态复选框隐藏动态输入框
- 如何使用AJAX基于数据库中的值创建动态复选框
- 从下拉菜单中创建动态复选框
- 动态复选框列表不起作用
- 通过动态字段中的动态复选框复制地址
- 动态复选框，单选，checkboxgroups, radiogroups extjs
