Javascript Дублируйте div в html и получите значения из дублированного div в форме submit

Question

В моем представлении codeigniter у меня есть div, содержащий поле выбора и текстовое поле. Также есть кнопка «Добавить больше». Моя задача состоит в том, чтобы дублировать весь этот div, когда нажата кнопка добавления большего количества, и когда я отправляю форму, мне нужно получить значения полей из исходного div и дублированного div. Как я могу это сделать? Я попытался дублировать div, используя метод клонирования jquery. Но не удалось найти решение.

Вот код, что я пытался до сих пор:

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

Answer 2

Я думаю, что главная проблема заключается в том, что вы клонировать DIV и прилагая DIV внутри тела. Это означает, что ваша форма не содержит ваших клонированных div. Если вы можете использовать JQuery попробовать следующий код

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

А теперь попробуйте представить форму.

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