问题
I have a form where I want to be able to duplicate a group of fields as many times as I want. And I also want to have field id, name, and label's for attributes of those new group of fields increase by 1. I've tried this so far with jQuery, and got it to at least duplicate the group of fields, but remove doesn't work. And I'm not sure how to do +1 for each of those 3 attributes. I appreciate any help I can get.
Here's a jsfiddle of it, http://jsfiddle.net/Unfxn/
HTML
<form method="post" action="#" class="inlineForm" enctype="multipart/form-data">
<div class="repeatingSection">
<a href="#" class="buttonGray buttonRight deleteFight">Delete</a>
<input type="hidden" name="fighter_a_id_1" id="fighter_a_id_1" value="" />
<input type="hidden" name="fighter_b_id_1" id="fighter_b_id_1" value="" />
<input type="hidden" name="winner_id_1" id="winner_id_1" value="" />
<div class="formRow">
<label for="fighter_a_1">Fighters</label>
<input type="text" name="fighter_a_1" id="fighter_a_1" value="" /> <span class="formTextExtraCenter">vs</span> <input type="text" name="fighter_b_1" id="fighter_b_1" value="" />
</div>
<div class="formRow">
<label for="fighter_a_pay_1">Fighter Pay $</label>
<input type="text" name="fighter_a_pay_1" id="fighter_a_pay_1" value="" /> <span class="formTextExtraCenter">vs</span> <input type="text" name="fighter_b_pay_1" id="fighter_b_pay_1" value="" />
</div>
<div class="formRow">
<label for="winner_1">Winner</label>
<input type="text" name="winner_1" id="winner_1" value="" />
</div>
<div class="formRow">
<label for="method_1">Method</label>
<input type="text" name="method_1" id="method_1" value="" />
</div>
<div class="formRow">
<label for="method_type_1">Method Type</label>
<input type="text" name="method_type_1" id="method_type_1" value="" />
</div>
<div class="formRow">
<label for="round_1">Round</label>
<input type="text" name="round_1" id="round_1" class="fieldSmall" value="" />
</div>
<div class="formRow">
<label for="time_1">Time</label>
<input type="text" name="time_1" id="time_1" class="fieldSmall" value="" />
</div>
<div class="formRow">
<label for="fight_number_1">Fight #</label>
<input type="text" name="fight_number_1" id="fight_number_1" class="fieldSmall" value="" />
</div>
</div>
<div class="formRowRepeatingSection">
<a href="#" class="buttonGray buttonRight addFight">Add Fight</a>
</div>
<div class="formRow">
<input type="submit" class="submitButton" value="Save Fights" />
</div>
</form>
JS
// Add a new repeating section
$('.addFight').click(function(){
var lastRepeatingGroup = $('.repeatingSection').last();
lastRepeatingGroup.clone().insertAfter(lastRepeatingGroup);
return false;
});
// Delete a repeating section
$('.deleteFight').click(function(){
$(this).parent('div').remove();
return false;
});
回答1:
This should automatically rename according all three elements:
// Add a new repeating section
$('.addFight').click(function(){
var currentCount = $('.repeatingSection').length;
var newCount = currentCount+1;
var lastRepeatingGroup = $('.repeatingSection').last();
var newSection = lastRepeatingGroup.clone();
newSection.insertAfter(lastRepeatingGroup);
newSection.find("input").each(function (index, input) {
input.id = input.id.replace("_" + currentCount, "_" + newCount);
input.name = input.name.replace("_" + currentCount, "_" + newCount);
});
newSection.find("label").each(function (index, label) {
var l = $(label);
l.attr('for', l.attr('for').replace("_" + currentCount, "_" + newCount));
});
return false;
});
// Delete a repeating section
$('.deleteFight').live('click',function(){
$(this).parent('div').remove();
return false;
});
I changed the delete handler, to use .live() instead, so that the handler would also be attached to newly created copies of that button. Now, if you're using jquery > 1.7 you should use .on()
The on() version would be:
// Delete a repeating section
$(document).on('click','.deleteFight',function(){
$(this).parent('div').remove();
return false;
});
回答2:
Here's my version.
http://jsfiddle.net/Unfxn/27/
It relies heavily on the index of the repeating region. So don't add any siblings above it. If you do need that, then wrap all repeating regions in another div.
Damn! too late :) anyway... here's the code.
// Add a new repeating section
var attrs = ['for', 'id', 'name'];
function resetAttributeNames(section) {
var tags = section.find('input, label'), idx = section.index();
tags.each(function() {
var $this = $(this);
$.each(attrs, function(i, attr) {
var attr_val = $this.attr(attr);
if (attr_val) {
$this.attr(attr, attr_val.replace(/_\d+$/, '_'+(idx + 1)))
}
})
})
}
$('.addFight').click(function(e){
e.preventDefault();
var lastRepeatingGroup = $('.repeatingSection').last();
var cloned = lastRepeatingGroup.clone(true)
cloned.insertAfter(lastRepeatingGroup);
resetAttributeNames(cloned)
});
// Delete a repeating section
$('.deleteFight').click(function(e){
e.preventDefault();
var current_fight = $(this).parent('div');
var other_fights = current_fight.siblings('.repeatingSection');
if (other_fights.length === 0) {
alert("You should atleast have one fight");
return;
}
current_fight.slideUp('slow', function() {
current_fight.remove();
// reset fight indexes
other_fights.each(function() {
resetAttributeNames($(this));
})
})
});
回答3:
Use this after you clone your object
Fiddle around :) http://jsfiddle.net/fedmich/MZjKR/1/
I'll leave some TODO for you, change the 3 to the current number of id
<script type="text/javascript">
$.fn.id_changer = function(new_id) {
return this.each(function(){
$(this).find('input').each(function(){
var ob = $(this);
ob.attr('id', this.id.replace(/_\d$/, '_' + new_id));
ob.attr('name', this.name.replace(/_\d$/, '_' + new_id));
});
});
};
来源：https://stackoverflow.com/questions/11380045/repeating-div-with-form-fields