Javascript 使用jQuery将字段从网页上的表单复制到同一网页上的另一表单
我是jQuery新手，我正在将上面的按钮的副本添加到表单中。表单有10个部分，每个部分有9个字段。我需要找到一种方法，将数据从第1节全部9个字段复制到第2节的字段中。我已经创建了按钮，可以让它复制顶部字段，但我需要找到一种方法，循环遍历表单的每个字段，并将所有数据复制到表单的下一部分。请让我知道我还可以提供/澄清什么，或者HTML代码的哪些部分会有帮助，因为它非常庞大。提前谢谢Javascript 使用jQuery将字段从网页上的表单复制到同一网页上的另一表单,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,我是jQuery新手，我正在将上面的按钮的副本添加到表单中。表单有10个部分，每个部分有9个字段。我需要找到一种方法，将数据从第1节全部9个字段复制到第2节的字段中。我已经创建了按钮，可以让它复制顶部字段，但我需要找到一种方法，循环遍历表单的每个字段，并将所有数据复制到表单的下一部分。请让我知道我还可以提供/澄清什么，或者HTML代码的哪些部分会有帮助，因为它非常庞大。提前谢谢 <!DOCTYPE html> <html lang="en"> <head> &
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
// Wrap every 7 elements in div, skipping first
///////////////////////////////////////////////
var frm_top_container = $('#frm_field_632_container');
var div;
var idClass = 0;
$('div:not(:first-of-type)', frm_top_container).each(function(i, e){
if (i % 7 == 0) div =
//add class to wrapper element
$('<div/>').addClass('section id-'+idClass).appendTo(frm_top_container);
div.append(e);
//increment variable
idClass++;
});
// Adding 'copy from above' button to bottom of each new section class
//////////////////////////////////////////////////////////////////////
$('div.section').append('<label>Copy from above</label><input type="checkbox" id="copy_from_above">');
// Log the element's value
//////////////////////////
$('.section').each(function() {
//set variable selector for both input and select elements ('*' is a wildcard)
var allElements = $('div > *');
//listen for any change of an input or select
$(allElements).change(function(){
//log the value in the console
console.log($(this).val());
});
});
// Create event listener for button click
/////////////////////////////////////////
$('#copy_from_above').on('click', function() {
//if the button state is checked
if ($(this).is(':checked')) {
//assign the value
$("#field_azebfk").val( $("#field_ebwkv8").val());
}
else {
//remove the value
$("#field_azebfk").val("")
}
});
}); //end
</script>
</head>
<body>
<div id="frm_field_632_container" class="frm_form_field frm_section_heading form-field start-left">
<h3 class="frm_pos_top">START/END</h3>
<div id="frm_field_4741_container" class="frm_form_field form-field"><a id="start-left-clear">Clear All</a></div>
<div id="frm_field_633_container" class="frm_form_field form-field frm_top_container frm_first_fifth">
<label for="field_ebwkv8" class="frm_primary_label">Start Date 1
<span class="frm_required"></span>
</label>
<input type="text" id="field_ebwkv8" name="item_meta[633]" value="" size="10" maxlength="10" class="auto_width frm_date hasDatepicker">
</div>
<div id="frm_field_634_container" class="frm_form_field form-field frm_top_container frm_fifth">
<label for="field_sz8y0c" class="frm_primary_label">Start Time 1
<span class="frm_required"></span>
</label>
<select name="item_meta[634]" id="field_sz8y0c" class="auto_width">
<option value="" selected="selected"></option>
<option value="12:00 AM">12:00 AM</option>
<option value="12:30 AM">12:30 AM</option>
<option value="01:00 AM">01:00 AM</option>
<option value="01:30 AM">01:30 AM</option>
<option value="02:00 AM">02:00 AM</option>
<option value="02:30 AM">02:30 AM</option>
<option value="03:00 AM">03:00 AM</option>
<option value="03:30 AM">03:30 AM</option>
<option value="04:00 AM">04:00 AM</option>
<option value="04:30 AM">04:30 AM</option>
<option value="05:00 AM">05:00 AM</option>
<option value="05:30 AM">05:30 AM</option>
<option value="06:00 AM">06:00 AM</option>
<option value="06:30 AM">06:30 AM</option>
<option value="07:00 AM">07:00 AM</option>
<option value="07:30 AM">07:30 AM</option>
<option value="08:00 AM">08:00 AM</option>
<option value="08:30 AM">08:30 AM</option>
<option value="09:00 AM">09:00 AM</option>
<option value="09:30 AM">09:30 AM</option>
<option value="10:00 AM">10:00 AM</option>
<option value="10:30 AM">10:30 AM</option>
<option value="11:00 AM">11:00 AM</option>
<option value="11:30 AM">11:30 AM</option>
<option value="12:00 PM">12:00 PM</option>
<option value="12:30 PM">12:30 PM</option>
<option value="01:00 PM">01:00 PM</option>
<option value="01:30 PM">01:30 PM</option>
<option value="02:00 PM">02:00 PM</option>
<option value="02:30 PM">02:30 PM</option>
<option value="03:00 PM">03:00 PM</option>
<option value="03:30 PM">03:30 PM</option>
<option value="04:00 PM">04:00 PM</option>
<option value="04:30 PM">04:30 PM</option>
<option value="05:00 PM">05:00 PM</option>
<option value="05:30 PM">05:30 PM</option>
<option value="06:00 PM">06:00 PM</option>
<option value="06:30 PM">06:30 PM</option>
<option value="07:00 PM">07:00 PM</option>
<option value="07:30 PM">07:30 PM</option>
<option value="08:00 PM">08:00 PM</option>
<option value="08:30 PM">08:30 PM</option>
<option value="09:00 PM">09:00 PM</option>
<option value="09:30 PM">09:30 PM</option>
<option value="10:00 PM">10:00 PM</option>
<option value="10:30 PM">10:30 PM</option>
<option value="11:00 PM">11:00 PM</option>
<option value="11:30 PM">11:30 PM</option>
</select>
</div>
<div id="frm_field_635_container" class="frm_form_field form-field frm_top_container frm_fifth">
<label for="field_cu4pnx" class="frm_primary_label">End Time 1
<span class="frm_required"></span>
</label>
<select name="item_meta[635]" id="field_cu4pnx" class="auto_width">
<option value="" selected="selected"></option>
<option value="12:00 AM">12:00 AM</option>
<option value="12:30 AM">12:30 AM</option>
<option value="01:00 AM">01:00 AM</option>
<option value="01:30 AM">01:30 AM</option>
<option value="02:00 AM">02:00 AM</option>
<option value="02:30 AM">02:30 AM</option>
<option value="03:00 AM">03:00 AM</option>
<option value="03:30 AM">03:30 AM</option>
<option value="04:00 AM">04:00 AM</option>
<option value="04:30 AM">04:30 AM</option>
<option value="05:00 AM">05:00 AM</option>
<option value="05:30 AM">05:30 AM</option>
<option value="06:00 AM">06:00 AM</option>
<option value="06:30 AM">06:30 AM</option>
<option value="07:00 AM">07:00 AM</option>
<option value="07:30 AM">07:30 AM</option>
<option value="08:00 AM">08:00 AM</option>
<option value="08:30 AM">08:30 AM</option>
<option value="09:00 AM">09:00 AM</option>
<option value="09:30 AM">09:30 AM</option>
<option value="10:00 AM">10:00 AM</option>
<option value="10:30 AM">10:30 AM</option>
<option value="11:00 AM">11:00 AM</option>
<option value="11:30 AM">11:30 AM</option>
<option value="12:00 PM">12:00 PM</option>
<option value="12:30 PM">12:30 PM</option>
<option value="01:00 PM">01:00 PM</option>
<option value="01:30 PM">01:30 PM</option>
<option value="02:00 PM">02:00 PM</option>
<option value="02:30 PM">02:30 PM</option>
<option value="03:00 PM">03:00 PM</option>
<option value="03:30 PM">03:30 PM</option>
<option value="04:00 PM">04:00 PM</option>
<option value="04:30 PM">04:30 PM</option>
<option value="05:00 PM">05:00 PM</option>
<option value="05:30 PM">05:30 PM</option>
<option value="06:00 PM">06:00 PM</option>
<option value="06:30 PM">06:30 PM</option>
<option value="07:00 PM">07:00 PM</option>
<option value="07:30 PM">07:30 PM</option>
<option value="08:00 PM">08:00 PM</option>
<option value="08:30 PM">08:30 PM</option>
<option value="09:00 PM">09:00 PM</option>
<option value="09:30 PM">09:30 PM</option>
<option value="10:00 PM">10:00 PM</option>
<option value="10:30 PM">10:30 PM</option>
<option value="11:00 PM">11:00 PM</option>
<option value="11:30 PM">11:30 PM</option>
</select>
</div>
<div id="frm_field_636_container" class="frm_form_field form-field frm_top_container frm_fifth">
<label for="field_dxfgfn" class="frm_primary_label">End Date 1
<span class="frm_required"></span>
</label>
<input type="text" id="field_dxfgfn" name="item_meta[636]" value="" size="10" maxlength="10" class="auto_width frm_date hasDatepicker">
</div>
<div id="frm_field_4619_container" class="frm_form_field form-field frm_top_container frm_last_fifth">
<label class="frm_primary_label">T/O 1
<span class="frm_required"></span>
</label>
<div class="frm_opt_container"><div class="frm_checkbox" id="frm_checkbox_4619-0"><label for="field_4619-0"><input type="checkbox" name="item_meta[4619][]" id="field_4619-0" value="T/O"> T/O</label></div>
</div>
</div>
<div id="frm_field_4695_container" class="frm_form_field form-field frm_top_container frm_first_half">
<label for="field_zbkmdh" class="frm_primary_label">Shift Type 1
<span class="frm_required"></span>
</label>
<select name="item_meta[4695]" id="field_zbkmdh">
<option value="--Choose one--" selected="selected">--Choose one--</option>
<option value="N/A">N/A</option>
<option value="Day">Day</option>
<option value="Night">Night</option>
<option value="Swing">Swing</option>
<option value="Weekend Call">Weekend Call</option>
</select>
</div>
<div id="frm_field_4696_container" class="frm_form_field form-field frm_top_container frm_last_half">
<label class="frm_primary_label">If Cancelled 1
<span class="frm_required"></span>
</label>
<div class="frm_opt_container"><div class="frm_checkbox" id="frm_checkbox_4696-0"><label for="field_4696-0"><input type="checkbox" name="item_meta[4696][]" id="field_4696-0" value="Cancelled"> Cancelled</label></div>
</div>
</div>
<div id="frm_field_637_container" class="frm_form_field form-field frm_top_container frm_first_fifth">
<label for="field_azebfk" class="frm_primary_label">Start Date 2
<span class="frm_required"></span>
</label>
<input type="text" id="field_azebfk" name="item_meta[637]" value="" size="10" maxlength="10" class="auto_width frm_date">
</div>
<div id="frm_field_638_container" class="frm_form_field form-field frm_top_container frm_fifth">
<label for="field_hfnidx" class="frm_primary_label">Start Time 2
<span class="frm_required"></span>
</label>
<select name="item_meta[638]" id="field_hfnidx" class="auto_width">
<option value="" selected="selected"></option>
<option value="12:00 AM">12:00 AM</option>
<option value="12:30 AM">12:30 AM</option>
<option value="01:00 AM">01:00 AM</option>
<option value="01:30 AM">01:30 AM</option>
<option value="02:00 AM">02:00 AM</option>
<option value="02:30 AM">02:30 AM</option>
<option value="03:00 AM">03:00 AM</option>
<option value="03:30 AM">03:30 AM</option>
<option value="04:00 AM">04:00 AM</option>
<option value="04:30 AM">04:30 AM</option>
<option value="05:00 AM">05:00 AM</option>
<option value="05:30 AM">05:30 AM</option>
<option value="06:00 AM">06:00 AM</option>
<option value="06:30 AM">06:30 AM</option>
<option value="07:00 AM">07:00 AM</option>
<option value="07:30 AM">07:30 AM</option>
<option value="08:00 AM">08:00 AM</option>
<option value="08:30 AM">08:30 AM</option>
<option value="09:00 AM">09:00 AM</option>
<option value="09:30 AM">09:30 AM</option>
<option value="10:00 AM">10:00 AM</option>
<option value="10:30 AM">10:30 AM</option>
<option value="11:00 AM">11:00 AM</option>
<option value="11:30 AM">11:30 AM</option>
<option value="12:00 PM">12:00 PM</option>
<option value="12:30 PM">12:30 PM</option>
<option value="01:00 PM">01:00 PM</option>
<option value="01:30 PM">01:30 PM</option>
<option value="02:00 PM">02:00 PM</option>
<option value="02:30 PM">02:30 PM</option>
<option value="03:00 PM">03:00 PM</option>
<option value="03:30 PM">03:30 PM</option>
<option value="04:00 PM">04:00 PM</option>
<option value="04:30 PM">04:30 PM</option>
<option value="05:00 PM">05:00 PM</option>
<option value="05:30 PM">05:30 PM</option>
<option value="06:00 PM">06:00 PM</option>
<option value="06:30 PM">06:30 PM</option>
<option value="07:00 PM">07:00 PM</option>
<option value="07:30 PM">07:30 PM</option>
<option value="08:00 PM">08:00 PM</option>
<option value="08:30 PM">08:30 PM</option>
<option value="09:00 PM">09:00 PM</option>
<option value="09:30 PM">09:30 PM</option>
<option value="10:00 PM">10:00 PM</option>
<option value="10:30 PM">10:30 PM</option>
<option value="11:00 PM">11:00 PM</option>
<option value="11:30 PM">11:30 PM</option>
</select>
</div>
<div id="frm_field_639_container" class="frm_form_field form-field frm_top_container frm_fifth">
<label for="field_cftv7y" class="frm_primary_label">End Time 2
<span class="frm_required"></span>
</label>
<select name="item_meta[639]" id="field_cftv7y" class="auto_width">
<option value="" selected="selected"></option>
<option value="12:00 AM">12:00 AM</option>
<option value="12:30 AM">12:30 AM</option>
<option value="01:00 AM">01:00 AM</option>
<option value="01:30 AM">01:30 AM</option>
<option value="02:00 AM">02:00 AM</option>
<option value="02:30 AM">02:30 AM</option>
<option value="03:00 AM">03:00 AM</option>
<option value="03:30 AM">03:30 AM</option>
<option value="04:00 AM">04:00 AM</option>
<option value="04:30 AM">04:30 AM</option>
<option value="05:00 AM">05:00 AM</option>
<option value="05:30 AM">05:30 AM</option>
<option value="06:00 AM">06:00 AM</option>
<option value="06:30 AM">06:30 AM</option>
<option value="07:00 AM">07:00 AM</option>
<option value="07:30 AM">07:30 AM</option>
<option value="08:00 AM">08:00 AM</option>
<option value="08:30 AM">08:30 AM</option>
<option value="09:00 AM">09:00 AM</option>
<option value="09:30 AM">09:30 AM</option>
<option value="10:00 AM">10:00 AM</option>
<option value="10:30 AM">10:30 AM</option>
<option value="11:00 AM">11:00 AM</option>
<option value="11:30 AM">11:30 AM</option>
<option value="12:00 PM">12:00 PM</option>
<option value="12:30 PM">12:30 PM</option>
<option value="01:00 PM">01:00 PM</option>
<option value="01:30 PM">01:30 PM</option>
<option value="02:00 PM">02:00 PM</option>
<option value="02:30 PM">02:30 PM</option>
<option value="03:00 PM">03:00 PM</option>
<option value="03:30 PM">03:30 PM</option>
<option value="04:00 PM">04:00 PM</option>
<option value="04:30 PM">04:30 PM</option>
<option value="05:00 PM">05:00 PM</option>
<option value="05:30 PM">05:30 PM</option>
<option value="06:00 PM">06:00 PM</option>
<option value="06:30 PM">06:30 PM</option>
<option value="07:00 PM">07:00 PM</option>
<option value="07:30 PM">07:30 PM</option>
<option value="08:00 PM">08:00 PM</option>
<option value="08:30 PM">08:30 PM</option>
<option value="09:00 PM">09:00 PM</option>
<option value="09:30 PM">09:30 PM</option>
<option value="10:00 PM">10:00 PM</option>
<option value="10:30 PM">10:30 PM</option>
<option value="11:00 PM">11:00 PM</option>
<option value="11:30 PM">11:30 PM</option>
</select>
</div>
<div id="frm_field_640_container" class="frm_form_field form-field frm_top_container frm_fifth">
<label for="field_5o29ta" class="frm_primary_label">End Date 2
<span class="frm_required"></span>
</label>
<input type="text" id="field_5o29ta" name="item_meta[640]" value="" size="10" maxlength="10" class="auto_width frm_date">
</div>
<div id="frm_field_4620_container" class="frm_form_field form-field frm_top_container frm_last_fifth">
<label class="frm_primary_label">T/O 2
<span class="frm_required"></span>
</label>
<div class="frm_opt_container"><div class="frm_checkbox" id="frm_checkbox_4620-0"><label for="field_4620-0"><input type="checkbox" name="item_meta[4620][]" id="field_4620-0" value="T/O"> T/O</label></div>
</div>
</div>
<div id="frm_field_4697_container" class="frm_form_field form-field frm_top_container frm_first_half">
<label for="field_etflnw" class="frm_primary_label">Shift Type 2
<span class="frm_required"></span>
</label>
<select name="item_meta[4697]" id="field_etflnw">
<option value="--Choose One--" selected="selected">--Choose One--</option>
<option value="N/A">N/A</option>
<option value="Day">Day</option>
<option value="Night">Night</option>
<option value="Swing">Swing</option>
<option value="Weekend Call">Weekend Call</option>
</select>
</div>
<div id="frm_field_4698_container" class="frm_form_field form-field frm_top_container frm_last_half">
<label class="frm_primary_label">If Cancelled 2
<span class="frm_required"></span>
</label>
<div class="frm_opt_container"><div class="frm_checkbox" id="frm_checkbox_4698-0"><label for="field_4698-0"><input type="checkbox" name="item_meta[4698][]" id="field_4698-0" value="Cancelled"> Cancelled</label></div>
</div>
</div>
请发布完整的代码示例，包括您的HTML。我添加了与第一个表单部分对应的HTML。总共有20个单独的部分，每个字段有不同的id。我有一个类似的要求，但不同的html结构。也许会有帮助。谢谢我终于明白了！！