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

Question

在我的 codeigniter 视图中，我有一个 div 包含一个 select 框和一个文本框。还有一个 'Add more' 按钮。我的任务是在单击添加更多按钮时复制整个 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

我认为主要问题是您正在克隆 div 并将 div 附加到正文中。这意味着您的表单不包含您克隆的 div。如果你可以使用 jquery 试试下面的代码

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

现在尝试提交表单。

Answer 2

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

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/

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

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

Javascript Duplicate a div in html and get the values from duplicated div's in form submit

javascript

jquery

codeigniter