克隆表格沒有克隆輸入值

Question

我克隆了一個表格，但它也是對輸入值進行了修飾。這裏是HTML表單

<form role="form" method="post" action="<?php echo base_url(); ?>staff_activity/add_ftth" enctype="multipart/form-data" > 

      <div id="main"> 
      <div class="col-md-12"> 
       <div class="form-group col-md-4"> 
        <label>Client's Name</label> 
        <input type="text" class="form-control" name="client_name[]" placeholder="Client's Name" id="client_name" autofocus required/> 
       </div> 


     <div class="form-group col-md-4"> 
        <label>Phone Number</label> 
        <input type="text" class="form-control" name="phone_number[]" placeholder="Phone Number" id="phone_number"/> 
       </div> 
       <div class="col-md-4"> 
        <label>Package</label> 
        <select class="form-control" name="package[]" > 
         <option selected=""> 


         </option> 

        </select> 
       </div> 

      </div> 



      <div class="col-md-12"> 
       <div class="form-group col-md-6"> 
       <label>Remarks</label> 
       <textarea name="remarks[]" class="form-control" placeholder="remarks" ></textarea> 
       </div> 
      </div> 
      </div> 

      <div class="col-md-12 buttonbox"> 
       <div class="pull-left"> 
       <button type="button" class="btn btn-success add" >ADD +</button> 
       <button type="button" class="btn btn-danger remove" >DEL -</button> 
       </div> 
      </div> 
<div class="col-md-12"> 
       <div class="pull-right"> 
        <input type="submit" class="btn btn-success btn-xm submit" name="submit" value="Submit" /> 
       </div> 
      </div> 

     </form> 

而且是我的腳本進行克隆如下

$(document).ready(function() { 
    var i = 0; 
    var last12 = $('.buttonbox').last(); 
    $(document).on('click', '.add', function() { 
     var clone = $('#main').last().clone().attr("id", "main" + i++).insertBefore(last12); 

     //clone.id = "main" + i; 

    }); 

    $(".remove").click(function(){ 
      $("#main:last").remove(); 
    }); 
}); 

雖然克隆形式的值也被克隆的劃分。 你可以在JSFiddle中檢查這段代碼。 https://jsfiddle.net/szn0007/yoebgocq/

Answer 1

嘗試下列步驟：復位輸入和使用val('')對於選擇textarea的，我們將選擇在選擇（默認的）第一元素

var clone = $('#main').clone().find("input,textarea").val("").end().find('select option:first-child()').attr('selected','selected').end().attr("id", "main" + i++).insertBefore(last12); 

刪除使用：

$(".remove").click(function(){ 
      $('div[id^="main"]:last').remove(); 
    }); 

demo

Answer 2

更新

$(function(){ 
    var i = 0; 
    var last12 = $('.buttonbox').last(); 
    $(document).on('click', '.add', function() { 

    var clone = $('#main').clone(); 
clone.find("input").val(""); 
clone.find("textarea").val(""); 
clone.find('select option:first-child()'); 
clone.attr("id", "main" + i++).insertBefore(last12); 



     //clone.id = "main" + i; 

    }); 

    $(".remove").click(function(){ 

    $('.main:last').remove(); 
    }); 
}); 

做參考https://plnkr.co/edit/EvOaLL1mQYB8yf6NDpby?p=preview