Adding dynamic fields with jquery - Multiple fields to clone at once

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! :-)

VVV · Accepted Answer · 2012-09-12 15:11:47Z

3

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;


})

edited Sep 12, 2012 at 15:11

answered Sep 12, 2012 at 15:00

VVV

7,6033 gold badges37 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jamie Over a year ago

Ahh awesome, that's the sort of thing I'm after! Thanks The one thing I'd need it to do is increase each element in the row by one as well, so the first one is 19, the next element in the row would be 20 etc etc. Would I just create multiple counters?

VVV Over a year ago

Sorry, I made a mistake. You just need to put the counter++ inside the each loop. I'm updating the code.

thecodeparadox · Accepted Answer · 2012-09-12 15:00:32Z

0

Tried to give you an example:

var row = $('div.row .element:last').clone(true);
row.find('input[name^=element-]').map(function() {
   this.name = 'element-' + ( parseInt( this.name.replace('element-',''), 10) + 1 );
   this.id = 'element-' + ( parseInt( this.id.replace('element-',''), 10) + 1 );
})
row.appendTo('div.row');

An example

edited Sep 12, 2012 at 15:00

answered Sep 12, 2012 at 14:52

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

1 Comment

jamie Over a year ago

Thanks, so I could + 4 to create an increment of 4 each time?

Sachin Jariyal · Accepted Answer · 2013-09-05 12:48:43Z

<fieldset id="woc_fieldset">
    <legend>Worker Compensation</legend>
    <table border="0">
    <tr>
    <td>Carier </td>
    <td><input type="text" name="worker_compensation_carrier" id="worker_compensation_carrier" value="" required="required"/></td>
    </tr>
    <tr>
    <td>Phone Number</td>
    <td><input type="text" name="worker_compensation_phone" id="worker_compensation_phone" class="phone" value="" required="required"/></td>
    </tr>
    <tr>
    <td>Premium</td>
    <td><input type="text" name="worker_compensation_premium" id="worker_compensation_premium" value=""  required="required"/></td>
    </tr>
    <tr>
    <td>Renewal Date</td> 
    <td><input type="text" name="worker_compensation_renewal_date" id="worker_compensation_renewal_date" value=""  required="required"/></td>
    </tr>
    </table>
    <button type="button" id="delete" onclick="remclone();">Delete</button>
</fieldset>
<button type="button" id="add" onclick="cloneit('#woc_fieldset','woc_class1');">Add</button>



<fieldset id="gel_fieldset">
    <legend>General Liability</legend>
    <table border="0">
    <tr>
    <td>Carier</td>
    <td><input type="text" name="general_liability_carrier" id="general_liability_carrier" value="" required="required"/></td>
    </tr>
    <tr>
    <td>Phone Number</td>
    <td><input type="text" name="general_liability_phone" id="general_liability_phone" value="" required="required"/></td>
    </tr>
    <tr>
    <td>Premium</td>
    <td><input type="text" name="general_liability_premium" id="general_liability_premium" value=""  required="required"/></td>
    </tr>
    <tr>
    <td>Renewal Date</td>
    <td><input type="text" name="general_liability_renewal_date" id="general_liability_renewal_date" value="" required="required" /></td>
    </tr>
    </table>
    <button type="button" id="delete" onclick="remclone();">Delete</button>
</fieldset>
<button type="button" id="add" onclick="cloneit('#gel_fieldset','woc_class2');">Add</button>

<fieldset id="goh_fieldset">
    <legend>Group Health</legend>
    <table border="0">
    <tr>
    <td>Carier</td>
    <td><input type="text" name="group_health_carrier" id="group_health_carrier" value=""  required="required"/></td>
    </tr>
    <tr>
    <td>Phone Number</td>
    <td><input type="text" name="group_health_phone" id="group_health_phone" value=""  required="required" /></td>
    </tr>
    <tr>
    <td>Premium</td>
    <td><input type="text" name="group_health_premium" id="group_health_premium" value=""  required="required"/></td>
    </tr>
    <tr>
    <td>Renewal Date</td>
    <td><input type="text" name="group_health_renewal_date" id="group_health_renewal_date" value=""  required="required"/></td>
    </tr>
    </table>
    <button type="button" id="delete" onclick="remclone();">Delete</button>
</fieldset>
<button type="button" id="add" onclick="cloneit('#goh_fieldset','woc_class3');">Add</button>


<fieldset id="prop_fieldset">
    <legend>Property</legend>
    <table border="0">
    <tr>
    <td>Carier</td>
    <td><input type="text" name="property_carrier" id="property_carrier" value=""  required="required"/></td>
    </tr>
    <tr>
    <td>Phone Number</td>
    <td><input type="text" name="property_phone" id="property_phone" value=""  required="required"/></td>
    </tr>
    <tr>
    <td>Premium</td>
    <td><input type="text" name="property_premium" id="property_premium" value=""  required="required"/></td>
    </tr>
    <tr>
    <td>Renewal Date</td>
    <td><input type="text" name="property_renewal_date" id="property_renewal_date" value=""  required="required"/></td>
    </tr>
    </table>
    <button type="button" id="delete" onclick="remclone();">Delete</button>
</fieldset>
    <button type="button" id="add" onclick="cloneit('#prop_fieldset','woc_class4');">Add</button>

<fieldset id="com_fieldset">
    <legend>Commercial Auto</legend>
    <table border="0">
    <tr>
    <td>Carier</td>
    <td><input type="text" name="commercial_auto_carrier" id="commercial_auto_carrier" value=""  required="required"/></td>
    </tr>
    <tr>
    <td>Phone Number</td>
    <td><input type="text" name="commercial_auto_phone" id="commercial_auto_phone" value="" required="required" /></td>
    </tr>
    <tr>
    <td>Premium</td>
    <td><input type="text" name="commercial_auto_premium" id="commercial_auto_premium" value="" required="required" /></td>
    </tr>
    <tr>
    <td>Renewal Date</td>
    <td><input type="text" name="commercial_auto_renewal_date" id="commercial_auto_renewal_date" value="" required="required" /></td>
    </tr>
    </table>
    <button type="button" id="delete" onclick="remclone();">Delete</button>
</fieldset>
    <button type="button" id="add" onclick="cloneit('#com_fieldset','woc_class5');">Add</button>

<fieldset>
    <legend>Upload Document</legend>
    <table border="0">
    <tr>
    <td>Policy</td>
    <td><input type="file" name="policy_pdf" id="file"></td>
    </tr>
    <tr>
    <td>Certificate Of Insurance</td>
    <td><input type="file" name="certificate_of_insurance_pdf" id="file"></td>
    </tr>
    <tr>
    <td>Loss Run Permission</td>
    <td><input type="file" name="loss_run_permission_pdf" id="file"></td>
    </tr>
    </table>
</fieldset>

Collectives™ on Stack Overflow

Adding dynamic fields with jquery - Multiple fields to clone at once

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related