我的网站表单中有一个地址字段，共4个 现在我想要做的是当用户输入地址详细信息时，给用户提供动态选项，用户可以通过该选项生成新的＆＃34;地址＆＃34;动态的字段 每一代地址字段都有动态＆＃34;复选框＆＃34;选项也是如此，所以我试图使用它，就像用户点击该复选框一样，用户制作的第一个条目应该被复制到动态创建的新字段用户。 那么我该如何实现呢？到目前为止，我已经完成了
<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/
答案 0 :(得分：1)
单击该复选框时，第一个地址（四个字段）应复制到第二个地址（四个字段）。
由于您可能无法对html中生成的id/name/class字段进行细粒度控制，因此我的解决方案可能/可能不适合您的需要。试试吧，看看。
我没有改变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 :(得分：1)
（阅读评论后＃34;我们如何处理动态字段？＆＃34;）
1）你的ID在js-code和html-code中似乎有所不同。我修改了js-code以使它们匹配。
2）您试图在用户输入地址之前读取地址，因此它们中没有值。我将它们移动到事件处理程序中，这样我们只有在用户选中复选框时才会读取值。
3）您尝试在地址字段上注册事件处理程序，甚至在实际创建相应的html元素之前。你有一个按钮，通过点击它，用户可以创建新地址吗？如果是这样，你也可以打电话给我的＆＃34; register_eventhandlers＆＃34;在创建所述新地址后立即。
4）因为，我不确定是否＆＃34;创建新地址＆＃34;在你的控制下，我写了一个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>
答案 2 :(得分：1)
此代码段与您在网站中尝试执行的操作最匹配。它作用于＆＃34; Settler Details＆＃34;中提供的ID模式。每次用户点击＆＃34;（+）＆＃34;链接，它在所有新的复选框元素上注册事件处理程序。
此代码中唯一不存在的部分是＆＃34;动态创建地址块＆＃34;。我模拟测试了那部分，以确保它到位。此外，您可能希望为＆＃34; First Address＆＃34;。
的字段找到更好的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>