如何将动态克隆元素插入mysql数据库?

时间:2015-04-23 10:13:31

标签: php html mysql

我有网站,用户可以选择喜欢的网站,访问网站的日期,评论当天他们访问的网站是否满意。最初有四行是硬编码的并插入到mysql数据库中。然后有一个添加按钮,使用户可以选择更多网站添加到现有网站,以及相关的访问和评论日期。问题是如何将其他选定的fav网站插入数据库。

这是我的代码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>

1 个答案:

答案 0 :(得分:0)

您必须将所有值作为数组传递给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'],
    ));
}