JavaScript HTML中如何复制一个div，并在表单提交时获取复制的div值

Question

在我的CodeIgniter视图中，有一个包含下拉框和文本框的

，还有一个“添加更多”按钮。 我的任务是在单击“添加更多”按钮时复制整个

，并且当我提交表单时，需要从原始

和复制的

获取字段值。如何完成这项任务？我尝试使用 jQuery clone方法复制

。 但是没有找到解决方案。

这是我迄今为止尝试过的代码：

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

- Sinsil Mathew

---

我注意到你的代码中有一个错别字。document.bodey.append(clone); 应该是 document.body.append(clone); 如果你要在 body 中添加代码的话。但是你的代码可能不会按照你的预期工作。 - MutantMahesh

嗨，如何添加一个删除按钮？谢谢。 - hous

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

- Oli Soproni B.

---

你好，我该如何添加一个“删除”按钮？谢谢。 - hous

@SinsilMathew 我们可以在这里创建动态ID或名称吗？ - sandip kakade

Answer 2

我认为主要问题在于您正在克隆div并将其附加到body内部。 这意味着您的表单不包含克隆的div。 如果您可以使用jquery，请尝试以下代码

var clonedDiv = $('#addparts').clone();
function duplicate() {   
  $("#addparts").after(clonedDiv );
}

现在尝试提交表单。

- Sandeeproop

---

我认为在克隆div时，DOM元素的名称应该被覆盖。那么如何检索每个DOM值？ - Sadikhasan

@Sadikhasan的克隆方法不会覆盖原始元素中的任何内容。请查看http://api.jquery.com/clone/ 但是，在您的建议之后，我仍然可以进一步优化我的代码。 - Sandeeproop

我的意思是，当你使用DOM元素进行克隆时，它也会被“克隆”，当你提交表单时，哪个DOM元素的值会被发布？你如何区分？我的建议是使用类似数组parts[]的名称。 - Sadikhasan

Answer 3

我不熟悉CodeIgniter。但是我提供了一个简单的jQuery代码来添加现有表单div的克隆。

我修改了两行：

<div class="row button-div">
<input type="button" name="addmore" class="addmore" value="Add More">

然后使用以下的jQuery代码。

    $(document).ready(function(){
      $('.addmore').click(function(e){
      $clone = $('#addparts').clone();
      $clone.attr('id', 'row-' + ($('.row').length + 1) );
      $clone.insertBefore($('.button-div'));  
      });
    });

注意：不要忘记在页面中包含jQuery。

在这里检查jsfiddle http://jsfiddle.net/msankhala/ybqzwx9n/

- MutantMahesh

Answer 4

<div id='addparts' class='clone'>
    <div class="row" id="copy">
        <div class="col-md-6">
            <div class="form-group">
                <select class="form-control input-medium" name="parts[]">
                    <option value="">select disabled>SelectParts</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></div>

JavaScript：$("#addMore").click(function (e) { e.preventDefault(); var cloned = $("#copy:first").clone(true) .appendTo('#addparts'); });

- HariKrishna