0

クローンを作成するたびに 4 つのフィールドが必要なフォームがあります。

基本的に私は行を持っています（これは私がクローンしたいもので、その中にすべてが含まれています）-しかし、各要素にはそれを識別するための番号とIDなどがあります。数字は 1 ずつですが、連続して 4 つの要素がある場合は、毎回全体で 4 ずつ増やす必要があるため、複製された要素は 1 で 5 になり、2 は 6 になります。

私のフォームのコードは以下のとおりです。うまくいけば、もう少し意味のあるものになります。

シーピットを使ってみた！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]" と表示されている場所は、クローンごとに増やしたい数です。

どんな助けでも大歓迎です！:-)

4

3 に答える 3

3

これがフィドルです

基本的に、あなたはただカウンターを動かす必要があります。

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;


})
于 2012-09-12T15:00:22.420 に答える
0

あなたに例をあげようとしました：

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

例

于 2012-09-12T14:52:53.987 に答える
-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>
于 2013-09-05T12:48:43.723 に答える