Question

我有一个可编辑的输入框，可将值保存到数据库中，并且运行良好。

现在我想尝试在该输入框中添加一个日期选择器，所以我要做的是：

<td contenteditable="true" class="date"><input type="date"></td>

现在，当我点击发送时，我得到“所有字段都是必填字段”。我做错了吗？

以下是完整的代码供您参考：

<!DOCTYPE html>
<html>
 <head>
  <title>PC Request Form</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>
  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
  
  <style type="text/css">
  	
  	body {
  		font-family: 'Questrial', sans-serif;
  	}
  </style>
 </head>
 <body>
  <br /><br />
  <div class="container">
   <img src="img/corelogo.png" width="250px; height: 110px;"></img>
   <h4>PC Request</h4>
   <div class="table-responsive">
    <table class="table table-bordered" style="border-radius: 10px;" id="crud_table">
     <tr>
      <th width="30%">Requested By</th>
      <th width="10%">Start Date</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="date"><input type="date"><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="left">
     <button type="button" name="save" id="save" class="btn btn-info">Send</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='date'></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 date = [];
  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());
  });
  $('.date').each(function(){
   date.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-message.php",
   method:"POST",
   data:{reqname:reqname, date:date, 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();
   }
  });
 });
});
</script>

插入值代码：

<?php
//insert.php
$connect = mysqli_connect("localhost", "root", "", "pcrequesttest");
if(isset($_POST["reqname"]))
{
 $reqname = $_POST["reqname"];
 $date = $_POST["date"];
 $empname = $_POST["empname"];
 $position = $_POST["position"];
 $account = $_POST["account"];
 $platform = $_POST["platform"];
 $processor = $_POST["processor"];
 $ram = $_POST["ram"];
 $monitor = $_POST["monitor"];
 $phone = $_POST["phone"];
 $phonetype = $_POST["phonetype"];
 $headset = $_POST["headset"];
 $query = '';
 for($count = 0; $count<count($reqname); $count++)
 {
  $reqname_clean = mysqli_real_escape_string($connect, $reqname[$count]);
  $date_clean = mysqli_real_escape_string($connect, $date[$count]);
  $empname_clean = mysqli_real_escape_string($connect, $empname[$count]);
  $position_clean = mysqli_real_escape_string($connect, $position[$count]);
  $account_clean = mysqli_real_escape_string($connect, $account[$count]);
  $platform_clean = mysqli_real_escape_string($connect, $platform[$count]);
  $processor_clean = mysqli_real_escape_string($connect, $processor[$count]);
  $ram_clean = mysqli_real_escape_string($connect, $ram[$count]);
  $monitor_clean = mysqli_real_escape_string($connect, $monitor[$count]);
  $phone_clean = mysqli_real_escape_string($connect, $phone[$count]);
  $phonetype_clean = mysqli_real_escape_string($connect, $phonetype[$count]);
  $headset_clean = mysqli_real_escape_string($connect, $headset[$count]);
  if($reqname_clean != '' && $date_clean != '' && $empname_clean != '' && $position_clean != '' && $account_clean != '' && $platform_clean != '' && $processor_clean != '' && $ram_clean != '' && $monitor_clean != '' && $phone_clean != '' && $phonetype_clean != '' && $headset_clean != '')
  {
   $query .= '
   INSERT INTO item(reqname, date, empname, position, account, platform, processor, ram, monitor, phone, phonetype, headset) 
   VALUES("'.$reqname_clean.'", "'.$date_clean.'", "'.$empname_clean.'", "'.$position_clean.'", "'.$account_clean.'", "'.$platform_clean.'", "'.$processor_clean.'", "'.$ram_clean.'", "'.$monitor_clean.'", "'.$phone_clean.'", "'.$phonetype_clean.'", "'.$headset_clean.'"); 
   ';
  }
 }
 if($query != '')
 {
  if(mysqli_multi_query($connect, $query))
  {
   echo 'Successfuly Sent!';
  }
  else
  {
   echo 'Error';
  }
 }
 else
 {
  echo 'All fields are required!';
 }
}
?>

Answer 1

从页面上收集值时，请执行以下操作：

$('.date').each(function(){
    date.push($(this).text());
});

这适用于所有contenteditable元素，它们的“值”是其文本内容。但是您现在已经在此处更改了标记：

<td contenteditable="true" class="date"><input type="date"></td>

您不再编辑该td的内容，而是在其中输入内容。首先，删除contenteditable，因为您不再使用它：

<td class="date"><input type="date"></td>

然后在您的JavaScript代码中，而不是寻找<td>的文本内容，而是在其中寻找<input>的值。也许是这样的：

$('.date').each(function(){
    date.push($(this).find('input').val());
});

您可以通过多种方式对此进行更改，例如将class移至<input>并从.each()循环中直接获取该值。但是概念仍然相同。您不再需要寻找<td>的文字，而是现在寻找<input>的价值。

使用日期选择器并将值从表单保存到数据库

1 个答案: