Question

我无法使用PHP中的Ajax JQuery插入到Mysql中的多个内联插入中。我能够从表单的第一行获取数据。之后，警报语句为我提供了重复的数据。（第一个值重复两次）。

实际上，我正在按照教程进行操作，并尝试根据自己的需要进行自定义。

https://www.webslesson.info/2017/03/multiple-inline-insert-data-using-ajax-jquery-php.html

我能够获取第一行的数据，但是对于第二行，我得到的是重复值。

<div id="installment">
   <br />
   <h2 align="center">Add Installments</h2>
   <br />
   <div class="table-responsive">
    <table class="table table-bordered" id="crud_table">
     <tr>
      <th width="30%">Installment Amount</th>
      <th width="10%">Installment Date</th>
      <th width="30%">Source of Funds</th>
      <th width="20%">Remarks/Refernce</th>
      <th width="10%">Image</th>
     </tr>
     <tr>
      <td contenteditable="true" class="item_name"></td>
      <td contenteditable="true" class="item_code"><input type='date' class='date-input' /></td>
      <td contenteditable="true" class="item_desc"><select class="show-tick" name="course_name" class='options'>                        PHP Code to fetch data from databse</options>
         </td>
      <td contenteditable="true" class="item_price"></td>
      <td contenteditable="true" class="item_image"><input type='file' name='fileToUpload' id='fileToUpload' class='fileToUpload'></td>
     </tr>
    </table>
    <div align="right">
     <button type="button" name="add" id="add" class="btn btn-success btn-xs">+</button>
    </div>
    <div align="center">
     <button type="button" name="save" id="save" class="btn btn-info">Save</button>
    </div>
    <br />
   </div>
  </div>

<script>
$(document).ready(function(){
 var count = 1;
 $('#add').click(function(){
  count = count + 1;
  var html_code = "<tr id='row"+count+"'>";
   html_code += "<td contenteditable='true' class='item_name'></td>";
   html_code += "<td contenteditable='true' class='item_code'><input type='date' class='date-input' /></td>";
   html_code += "<td contenteditable='true' class='item_desc'><select class='show-tick' name='course_name' class='options'><option value='' >-- Please Select Source of Funds  --</option><?php $select_course_query = "SELECT * FROM sources";$select_course = mysqli_query($connection,$select_course_query);while($row = mysqli_fetch_assoc($select_course)){$course_title = $row['source_name'];echo "<option value='$course_title'>$course_title</option>";}?></select></td>";
   html_code += "<td contenteditable='true' class='item_price' ></td>";
   html_code += "<td contenteditable='true' class='item_price' ><input type='file' name='fileToUpload' id='fileToUpload' class='fileToUpload'></td>";
   html_code += "<td><button type='button' name='remove' data-row='row"+count+"' class='btn btn-danger btn-xs remove'>-</button></td>";   
   html_code += "</tr>";  
   $('#crud_table').append(html_code);
 });

 $(document).on('click', '.remove', function(){
  var delete_row = $(this).data("row");
  $('#' + delete_row).remove();
 });

 $('#save').click(function(){
  var item_name = [];
  var item_code = [];
  var item_desc = [];
  var item_price = [];
  var image = [];

  $('.item_name').each(function(){
   item_name.push($(this).text());
  });
  alert(item_name);
  $('.item_code').each(function(){
   var date = $(".date-input").val();      
   item_code.push(date);
  });
  alert(item_code);
  $('.item_desc').each(function(){
   var option = $(".item_desc option:selected").text();  
   item_desc.push(option);
  });
  alert(item_desc);
  $('.item_price').each(function(){
   item_price.push($(this).text());
  });
  alert(item_price);
  $('.fileToUpload').each(function(){
   var filename = $('input[type=file]').val().split('\\').pop();      
   image.push(filename);
  });
  alert(image);

  $.ajax({
   url:"insert.php",
   method:"POST",
   data:{item_name:item_name, item_code:item_code, item_desc:item_desc, item_price:item_price,image:image},
   success:function(data){
    alert(data);
    $("td[contentEditable='true']").text("");
    for(var i=2; i<= count; i++)
    {
     $('tr#'+i+'').remove();
    }
   }
  });
 });
});
</script>

谢谢。

无法使用PHP中的Ajax JQuery插入多个内联插入Mysql

0 个答案: