Question

I was wondering if anyone could help, I have a form that needs 4 fields at each time to be cloned.

Basically I have a row (This is what i want cloned, with everything in it) – But each element has a number to identify it, and an ID etc. So basically when I add an additional row, I need it to change the corresponding numbers by 1, but where there are 4 elements in a row, I’d need them to increase by 4 overall each time, so the element cloned that was 1, would become 5, that was 2 become 6 etc.

The code for my form is below, and hopefully will make a bit more sense.

I’ve tried using the Sheepit! jquery plugin but can’t get the numbers to increase sequentially with each other.

<div class="row">
    <div class="element">
        <label id="label-element-15" class="label">
            <span class="labelelementvalue">Weight</span>
            <span class="required">*</span>
        </label>
        <div class="errormessage" id="errormessage-element-15"></div>
        <div class="option-container">
            <input class="af-inputtext af-formvalue  " type="text" name="element-15" id="element-15" value="">
        </div>
        <input type="checkbox" style="display:none" value="15" checked="" name="requiredelement[]" id="requiredelement-15">
    </div>
    <div class="element">
        <label id="label-element-16" class="label">
            <span class="labelelementvalue">Length</span>
            <span class="required">*</span>
        </label>
        <div class="errormessage" id="errormessage-element-16"></div>
        <div class="option-container">
            <input class="af-inputtext af-formvalue  " type="text" name="element-16" id="element-16" value="">
        </div>
        <input type="checkbox" style="display:none" value="16" checked="" name="requiredelement[]" id="requiredelement-16">
    </div>
    <div class="element">
        <label id="label-element-17" class="label">
            <span class="labelelementvalue">Width</span>
            <span class="required">*</span>
        </label>
        <div class="errormessage" id="errormessage-element-17"></div>
        <div class="option-container">
            <input class="af-inputtext af-formvalue  " type="text" name="element-17" id="element-17" value="" >
        </div>
        <input type="checkbox" style="display:none" value="17" checked="" name="requiredelement[]" id="requiredelement-17">
    </div>
    <div class="element">
        <label id="label-element-18" class="label" >
            <span class="labelelementvalue">Height</span>
            <span class="required">*</span>
        </label>
        <div class="errormessage" id="errormessage-element-18"></div>
        <div class="option-container">
            <input class="af-inputtext af-formvalue" type="text" name="element-18" id="element-18" value="">
        </div>
        <input type="checkbox" style="display:none" value="18" checked="" name="requiredelement[]" id="requiredelement-18">
    </div>
</div>

So basically where it says element-[number] or value=”[number]” in the hidden checkbox is the number I’d want to increase on each clone.

Any help would be much appreciated! 🙂

Answer 1

Here’s a fiddle

Basically, you just need to get a counter going.

var counter = 19; //start index

//clone is a button I created to clone the row
$('#clone').click(function() {
    //clone the first row
    var newRow =  $('div.row:first').clone();

    //for every div.element, update the name, id, value 
    newRow.find('div.element').each(function() {
        $(this).find('label.label').attr('id', 'label-element-' + counter);
        $(this).find('input.af-inputtext').attr('name', 'element-' + counter).attr('id', 'element-' + counter);
        $(this).find('input[type="checkbox"]').val(counter);

        //increment the counter
        counter++;

    });

    //insert the new row after the last one
    $('div.row:last').after(newRow);



    //return false... just because clone is a <a> tag
    return false;


})