Javascript 在 html 中复制一个 div 并从表单提交中复制的 div 中获取值

Question

在我的 codeigniter View 中，我有一个包含选择框和文本框的 div。还有一个“添加更多”按钮。我的任务是在单击添加更多按钮时复制整个 div，当我提交表单时，我需要从原始 div 和复制的 div 获取字段值。我怎样才能做到这一点？我尝试使用 jquery 克隆方法 复制 div。但找不到解决方案。

这是我到目前为止尝试的代码:

    <?php echo form_open("vehicle/addparts");?>
    <div class="row" id="addparts">
    <div class="col-md-6">
    <div class="form-group">
    <select class="form-control input-medium" name="parts">
    <option value="">select disabled>Select Parts</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
    </select>
    </div>
    </div>
    <div class="col-md-6">
    <div class="form-group">
    <label class="control-label">Quantity</label>
    <input type="text" name="partsquantity" id="partsquantity">
    </div>
    </div>
    </div>
    <div class="row">
    <input type="button" name="addmore" value="Add More" onClick="duplicate">
    </div>
    <?php echo form_close();?>
Javascript:

    <script>
    function duplicate() {    
    var original = document.getElementById('addparts');
    var clone = original.cloneNode(true);
    clone.id = "duplic";
    document.bodey.append(clone);
    }
    </script>

Answer 1

<?php echo form_open("vehicle/addparts");?>

        <div class="row" id="addparts">
            <div class="col-md-6">
                <div class="form-group">
                    <select class="form-control input-medium" name="parts[]">
                        <option value="">select disabled>Select Parts</option>
                        <option value="a">A</option>
                        <option value="b">B</option>
                        <option value="c">C</option>
                    </select>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label class="control-label">Quantity</label>
                    <input type="text" name="partsquantity[]" id="partsquantity">
                </div>
            </div>
        </div>
        <div class="row" id="div_button">
            <input type="button" name="addmore" value="Add More" id="addMore">
        </div>
          <?php echo form_close();?>

rename the of the inputs to be array so that if you submit the form it will submit all the input elements
you will receive a array of values with particular naming groupings

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>

    $(document).ready(function() {

        var id = 1;

        // get item

        var item = $("#addparts");

        var before = $('#div_button');

        // initalize event click

       $('#addMore').on('click', function() {
            // clone addparts
            var clone = item.clone(true);
                // remove id
                clone.attr('id', '');
                // add class duplicate
                clone.attr('class', 'duplicate');
            // insert duplicate before button div
            before.before(clone);


       });

    });


</script>
enter code here