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

admin管理员组

文章数量:1352803

In my codeigniter view, I've a div containing a select box and a textbox. Also there is an 'Add more' button. My task is to duplicate this whole div when the add more button is clicked and when I submit the form I need to get the field values from the original div and duplicated div's. How Can I acplish this? I tried duplicating div using jquery clone method. But couldn't find the solution.

Here is the code what I tried so far:

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

In my codeigniter view, I've a div containing a select box and a textbox. Also there is an 'Add more' button. My task is to duplicate this whole div when the add more button is clicked and when I submit the form I need to get the field values from the original div and duplicated div's. How Can I acplish this? I tried duplicating div using jquery clone method. But couldn't find the solution.

Here is the code what I tried so far:

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

• javascript
• jquery
• codeigniter

Share Improve this question Follow asked Feb 17, 2015 at 5:06 Sinsil MathewSinsil Mathew 49866 silver badges2020 bronze badges 2

• one thing i noticed is typo in your code. document.bodey.append(clone); this should be document.body.append(clone); if you are appending code in body. But your code should not work as you expect. – MutantMahesh Commented Feb 17, 2015 at 5:31
• Hi , how to add a button remove ? Thanks – hous Commented May 29, 2015 at 18:12

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

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

I think the main problem is that you are cloning the div and appending the div inside the body. This means your form doesn't contain your cloned divs. If you can use jquery try following code

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

And now try to submit the form.

I am not familiar with codeigniter. But i am providing the simple jquery code to add the clone of existing form div.

I modified the two lines:

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

then use the following jquery code.

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

Note: Not forget to include jquery on page.

check jsfiddle here http://jsfiddle/msankhala/ybqzwx9n/

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

本文标签：