CODEWITHSUNDEEP
jqueryhtmlformsfieldfieldset
jamie
jamie

Reputation: 545

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

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

Upvotes: 0

Views: 3056

Answers (3)

Sachin Jariyal
Sachin Jariyal

Reputation: 1

<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>

Upvotes: -1

VVV
VVV

Reputation: 7593

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;


})

Upvotes: 3

thecodeparadox
thecodeparadox

Reputation: 87073

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

Upvotes: 0

Related Questions