PHP使用表单提交中的jQuery clone方法获取重复div中的字段值

Question

in my codeigniter view, I've a table row which duplicates when a button is clicked using jQuery clone method. My task is to get the field values inside the duplicated row when the form is submitted.

Here is my code:

<script>
function duplicate() {    
var original = document.getElementById('service');
var rows = original.parentNode.rows;
var i = rows.length - 1;
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplic" + (i); // there can only be one element with an ID
clone.name = "duplic" + (i); 
original.parentNode.insertBefore(clone, rows[i]);
}
</script>

    <div class="portlet-body">
    <div class="tab-content">
<?php

$attrib = array (
        'class' => 'addcomplaint',
        'id' => 'addcomplaint',
        'role' => 'form' 
);
echo form_open ( "vehicle/regcomplaint", $attrib );
?>
<!-- COMPLAINT INFO TAB -->
        <div class="tab-pane active" id="tab_1_1">
            <table style="padding: 0px;">
                <tr id="service">
                    <td class="form-group col-md-6" style="padding: 0px;">
                        <label class="control-label col-md-6" style="padding: 0px;">Complaint Description</label> 
                        <select name="complainttype" id="select2_sample4" class="select2 form-control">
                            <option value="" selected disabled>select complaint type</option>
                            <option value="Complaint Type 1">Complaint Type 1</option>
                            <option value="Complaint Type 2">Complaint Type 2</option>
                            <option value="Complaint Type 3">Complaint Type 3</option>
                            <option value="Complaint Type 4">Complaint Type 4</option>
                            <option value="Complaint Type 5">Complaint Type 5</option>
                        </select>
                    </td>
                    <td class="form-group col-md-6">
                        <label class="control-label col-md-6" style="padding: 0px;">Work Hours</label>
                        <input type="text" class="form-control col-md-6" name="workhours" id="workhours" style="padding-right: 0px;" />
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <button type="button" id="addmore" class="btn green" style="float: right; margin-right: 15px; margin-top: 20px;" onclick="duplicate()">
                            Add Complaint <i class="fa fa-plus"></i>
                        </button>
                    </td>
                </tr>
            </table>
            <div class="margiv-top-10">
                <input type="submit" class="btn green-haze" value="Submit" name="submit"> <a href="#" class="btn default">Cancel </a>
            </div>
        </div>
        <!-- END COMPLAINT INFO TAB -->
<?php echo form_close();?> 
</div>
</div>

When I try submitting the form, I'm getting only original fields, not the duplicated fields. Can anyone help me to get the values in duplicated field also. Thanks in advance

Answer 1

In these scenarios its often easier to give the field names based on an array – for example:

<p>Recommend a friend:</p>
<input type="text" name="recommended_friend[]"/>

It just means that server side you can do something along the lines of:

foreach($_POST['recommended_friend'] as $recommend){
    // deal with the input field
}

This will work with one of the fields, or hundreds of them