Repeating div with form fields

Question

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

Answer 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;
});

Answer 2

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));           
    });
  });
};

Answer 3

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)); 
            })            
        })   
    });


​