如何將動態克隆的元素插入到mysql數據庫？

Question

我有一個網站，可以讓用戶選擇喜歡的網站，訪問網站的日期，評論他們對當天訪問的網站的滿意度。最初有四行被硬編碼並插入到mysql數據庫中。然後有一個添加按鈕，使用戶可以選擇更多的網站添加到現有的網站，還有相關的訪問日期和評論。問題是如何將額外選定的收藏網站插入到數據庫中。

這裏是我的代碼jsfiddle.net/j8odptds/

  var cloneIndex = $('#websites').length+4; 
     $('#add').on('click', function() { 
      var newElem = $('#websites').clone().appendTo('#addMoreWebsite').attr('id','website' + cloneIndex); 
      $(newElem).find('[id=website4]').attr('name','website' + (cloneIndex)); 
      $(newElem).find('[id=website4]').attr('id','website' + (cloneIndex)); 

      $(newElem).find('[id=Date4]').attr('name','Date' + (cloneIndex)); 
      $(newElem).find('[id=Date4]').attr('id','Date' + (cloneIndex)); 

      $(newElem).find('[id=Comments4]').attr('name','Comments' + (cloneIndex)); 
      $(newElem).find('[id=Comments4]').attr('id','Comments' + (cloneIndex)); 

      cloneIndex++; 
     }); 
    <div class="well"> 
     <div class="row"> 
      <div class="col-xs-3"> 
       <h4>Favourite web</h4> 
      </div> 
      <div class="col-xs-2"> 
       <h4>Date of visit</h4> 
      </div> 
      <div class="col-xs-3"> 
        <h4>Comments</h4> 
      </div> 
      </div> 
     </div> 
     <div class="row"> 
     <div class="col-xs-3"> 
     <select class="form-control input-sm" name="website1" id="website1"> 
     <option>google</option> 
     <option>msn</option> 
     <option>youtube</option> 
     <option>linkedin</option> 
     <option>facebook</option> 
     <option>skyscanners</option> 
     <option>stackoverflow</option> 
     </select> 
     </div> 
     <div class="col-xs-2"> 
     <input class="form-control input-sm" type="date" name="Date"> 
     </div> 
     <div class="col-xs-3"> 
     <textarea class="form-control input-sm" rows="3" name="Comments">    </textarea> 
    </div> 
<br> 
<div class="row"> 
    <div class="col-xs-3"> 
    <select class="form-control input-sm" name="website2" id="website2"> 
     <option>google</option> 
     <option>msn</option> 
     <option>youtube</option> 
     <option>linkedin</option> 
     <option>facebook</option> 
     <option>skyscanners</option> 
     <option>stackoverflow</option> 
    </select> 
    </div> 
    <div class="col-xs-2"> 
    <input class="form-control input-sm" type="date" name="Date2" placeholder="dd/mm/yyyy"> 
    </div> 
    <div class="col-xs-3"> 
    <textarea class="form-control input-sm" rows="3" name="Comments2"></textarea> 
    </div> 
<br> 
<div class="row"> 
    <div class="col-xs-3"> 
    <select class="form-control input-sm" name="website3" id="website3"> 
     <option>google</option> 
     <option>msn</option> 
     <option>youtube</option> 
     <option>linkedin</option> 
     <option>facebook</option> 
     <option>skyscanners</option> 
     <option>stackoverflow</option> 
    </select> 
    </div> 
    <div class="col-xs-2"> 
    <input class="form-control input-sm" type="date" name="Date3" placeholder="dd/mm/yyyy"> 
    </div> 
    <div class="col-xs-3"> 
    <textarea class="form-control input-sm" rows="3" name="Comments3"></textarea> 
    </div> 
<br> 
<div class="row" id="websites"> 
    <div class="col-xs-3"> 
    <select class="form-control input-sm" name="website4" id="website4"> 
     <option>google</option> 
     <option>msn</option> 
     <option>youtube</option> 
     <option>linkedin</option> 
     <option>facebook</option> 
     <option>skyscanners</option> 
     <option>stackoverflow</option> 
    </select> 
    <br> 
    </div> 
    <div class="col-xs-2"> 
    <input class="form-control input-sm" type="date" name="Date4" id="Date4" placeholder="dd/mm/yyyy"> 
    </div> 
    <div class="col-xs-3"> 
    <textarea class="form-control input-sm" rows="3" name="Comments4" id="Comments4"></textarea> 
    </div> 
</div> 
<div id="addMoreWebsite"></div> 
    <button type="button" class="btn btn-primary btn-sm" name="add"  id="add">Add more Website</button> 

Answer 1

你要通過所有的值到PHP作爲數組。所以你所有的輸入必須有name="namespace[rowId]name"。在PHP中，您只需循環該數組並將所有值插入數據庫。

<div class="wrapper"> 
    <input type="text" name="Website[0]name"/> 
    <select name="Website[0]rating"><option></option></select> 
</div> 

<button type="button" onClick="addRow()">Add row</button> 

var lastRow = 0; 
function addRow() { 
    lastRow++; 
    $('.wrappper').append(
     '<input type="text" name="Website[' + lastRow + ']name"/>' 
     + '<select name="Website[' + lastRow + ']rating"><option></option></select>' 
    ); 
} 

[php] 
foreach ($_POST['Website'] as $website) { 
    $this->db->insert(array(
     'name' => $website['name'], 
     'rating' => $website['rating'], 
    )); 
}