Использование средства выбора даты и сохранение значений из формы в базу данных

У меня есть редактируемое поле ввода, которое сохраняет значения в базе данных, и оно отлично работает.

Теперь я хотел попробовать добавить средство выбора даты в это поле ввода, поэтому я сделал следующее:

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

php html mysql database phpmyadmin

15.02.2019 18:15

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Symfony Station Communiqué - 7 июля 2023 г

Это коммюнике первоначально появилось на Symfony Station .

Оживление вашего приложения Laravel: Понимание режима обслуживания

Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...

Установка и настройка Nginx и PHP на Ubuntu-сервере

В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.

Коллекции в Laravel более простым способом

Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...

Как установить PHP на Mac

PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>.

Как я не понял этой логики? В любом случае, лол, спасибо большое!

— 15.02.2019 18:31

Привет! Я просто хотел спросить, а что, если мне нужно раскрывающееся меню с помощью <select>? То, что я сделал, было $('.position').each(function(){ position.push($(this).select()); });

— 15.02.2019 19:07

@RenzoMiranda: <select> также будет иметь значение: .val()

— 15.02.2019 19:08

15.02.2019 18:21