Question

我为数据库创建了一个动态表单，并且一切运行正常，如下所示：

动态形式

现在我想在每个字段上添加一个下拉列表，现在提交时遇到错误，这是错误：

错误

所以基本上，直到我添加下拉列表，一切都可以正常运行。

这是整个代码：

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
 </head>
 <body>
  <br /><br />
  <div class="container">
   <br />
   <h2 align="center"></h2>
   <br />
   <div class="table-responsive">
    <table class="table table-bordered" id="crud_table">
     <tr>
      <th width="30%">Requested By</th>
      <th width="10%">Day</th>
      <th width="10%">Employee Name</th>
      <th width="10%">Position</th>
      <th width="10%">Account</th>
      <th width="10%">Platform</th>
      <th width="45%">Processor</th>
      <th width="10%">RAM</th>
      <th width="10%">Monitor</th>
      <th width="10%">Phone</th>
      <th width="10%">Phone Type</th>
      <th width="10%">Headset</th>
     </tr>
     <tr>
      <td contenteditable="true" class="reqname"></td>
      <td contenteditable="true" class="day"></td>
      <td contenteditable="true" class="empname"></td>
      <td contenteditable="true" class="position"></td>
      <td contenteditable="true" class="account"></td>
      <td contenteditable="true" class="platform"></td>
      <td contenteditable="true" class="processor"></td>
      <td contenteditable="true" class="ram"></td>
      <td contenteditable="true" class="monitor"></td>
      <td contenteditable="true" class="phone"></td>
      <td contenteditable="true" class="phonetype"></td>
      <td contenteditable="true" class="headset"></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 id="inserted_item_data"></div>
   </div>
   
  </div>
 </body>
</html>

<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='reqname'></td>";
   html_code += "<td contenteditable='true' class='day'></td>";
   html_code += "<td contenteditable='true' class='empname'></td>";
   html_code += "<td contenteditable='true' class='position' ></td>";
   html_code += "<td contenteditable='true' class='account' ></td>";
   html_code += "<td contenteditable='true' class='platform' ></td>";
   html_code += "<td contenteditable='true' class='processor' ></td>";
   html_code += "<td contenteditable='true' class='ram' ></td>";
   html_code += "<td contenteditable='true' class='monitor' ></td>";
   html_code += "<td contenteditable='true' class='phone' ></td>";
   html_code += "<td contenteditable='true' class='phonetype' ></td>";
   html_code += "<td contenteditable='true' class='headset' ></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 reqname = [];
  var day = [];
  var empname = [];
  var position = [];
  var account = [];
  var platform = [];
  var processor = [];
  var ram = [];
  var monitor = [];
  var phone = [];
  var phonetype = [];
  var headset = [];
  $('.reqname').each(function(){
   reqname.push($(this).text());
  });
  $('.day').each(function(){
   day.push($(this).text());
  });
  $('.empname').each(function(){
   empname.push($(this).text());
  });
  $('.position').each(function(){
   position.push($(this).text());
  });
  $('.account').each(function(){
   account.push($(this).text());
  });
  $('.platform').each(function(){
   platform.push($(this).text());
  });
  $('.processor').each(function(){
   processor.push($(this).text());
  });
  $('.ram').each(function(){
   ram.push($(this).text());
  });
  $('.monitor').each(function(){
   monitor.push($(this).text());
  });
  $('.phone').each(function(){
   phone.push($(this).text());
  });
  $('.phonetype').each(function(){
   phonetype.push($(this).text());
  });
  $('.headset').each(function(){
   headset.push($(this).text());
  });
  $.ajax({
   url:"insert.php",
   method:"POST",
   data:{reqname:reqname, day:day, empname:empname, position:position, account:account, platform:platform, processor:processor, ram:ram, monitor:monitor, phone:phone, phonetype:phonetype, headset:headset},
   success:function(data){
    alert(data);
    $("td[contentEditable='true']").text("");
    for(var i=2; i<= count; i++)
    {
     $('tr#'+i+'').remove();
    }
    fetch_item_data();
   }
  });
 });
 
 function fetch_item_data()
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   success:function(data)
   {
    $('#inserted_item_data').html(data);
   }
  })
 }
 fetch_item_data();
 
});
</script>

这就是我为下拉菜单所做的：

<td contenteditable="true" class="platform">
      	<select>
      		<option value="Desktop">Desktop</option>
        	<option value="Laptop">Laptop</option>
      	</select>
      </td>

这是我的数据库架构，以备不时之需：

数据库架构

在添加下拉列表之前，数据库的动态表单工作正常

0 个答案: