使用 jquery 添加动态字段 - 一次克隆多个字段

Question

我想知道是否有人可以提供帮助，我有一个表单，每次需要克隆 4 个字段。

基本上我有一行（这是我想要克隆的内容，其中包含所有内容） - 但是每个元素都有一个数字来标识它，还有一个 ID 等。所以基本上当我添加一个额外的行时，我需要它将相应的数字更改为 1，但是如果连续有 4 个元素，我需要它们每次整体增加 4，因此克隆的元素为 1，将变为 5，即 2 变为 6，等等。

我的表单代码如下，希望能更有意义。

我尝试过使用 Sheepit！ jquery 插件，但无法让数字彼此顺序增加。

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

所以基本上隐藏复选框中的 element-[number] 或 value="[number]" 是我想在每个克隆上增加的数字。

任何帮助将不胜感激！ :-)

Answer 1

Here's a fiddle

基本上，您只需要启动一个计数器。

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;


})

Answer 2

试着给你举个例子：

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

Answer 3

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