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

标签 php html mysql database phpmyadmin

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

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

<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!';
 }
}
?>

最佳答案

当您从页面收集值时，您可以执行以下操作:

$('.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> 的值.

关于php - 使用日期选择器并将值从表单保存到数据库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54714108/

上一篇：mysql - 如何从 SQL 中的表中进行选择，其中列中的元素仅包含另一列的一个特征，而另一列本身又包含两个特征？

下一篇：mysql - 检查我的数据库关系结构是否正确

相关文章：

php - 在 Linux 服务器上使用 PHP 上传文件不起作用

php - MYSQL WHERE IN爆炸数组

html - 如果屏幕上有足够的空间，将 table 并排放置

html - 表格边框底部消失了吗？

mysql - vb 无法加载文件或程序集 Mysql

php - 电影放映时间的数据库设计

php - 从数据库中删除项目 PHP SQL

php - 使用 Varnish 缓存动态页面

php - 使用Ajax将order_id传递到php并插入到数据库

c# - 使用 Entity Framework Code First 在 MySQL 中创建 VARCHAR BINARY 列

©2024 IT工具网  联系我们