Javascript Duplicate div in html and get values ​​from duplicated div in submit form

Question

In my codeigniter view, I have a div containing a select box and a text box. There is also a "Add more" button. My task is to duplicate this entire div when the add more button is pressed, and when I submit the form, I need to get the field values ​​from the original div and the duplicated div. How can i do this? I tried duplicating a div using the jquery clone method . But could not find a solution.

Here is the code I've 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> 

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 

Answer 2

I think the main problem is that you are cloning a div and adding a div inside the body. This means that your form does not contain your cloned divs. If you can use jquery try the following code

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

Now try submitting the form.

Answer 3

I am not familiar with codeigniter. But I provide simple jquery code to add a clone of an existing div form.

I changed 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. Remember to enable jquery on the page.

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