Wednesday, February 23, 2022

[FIXED] Using datepicker and saving values from form to database

      , , , ,      No comments   

Issue

I have an editable input box that saves values to the database and it's working perfectly.

Now I wanted to try adding a datepicker inside that input box so what I did was:

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

Now when I hit send, I'm getting "All fields are required". Am I doing it wrong?

Here's the whole code for your reference:

<!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>

Insert values code:

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


Solution

When you're collecting values from your page, you do this:

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

This is working for all of your contenteditable elements, for which their "value" is their text content. But you've now changed your markup here:

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

You're no longer editing the content of that td, but instead have an input within it. First, remove contenteditable since you're not using it anymore:

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

Then in your JavaScript code, instead of looking for the text content of the <td>, look for the value of the <input> therein. Perhaps something like this:

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

You could change this up in a number of ways, such as moving the class to the <input> and getting the value irectly from that in your .each() loop. But the concept is still the same. You're no longer looking for the text of your <td>, you're now looking for the value of your <input>.



Answered By - David

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...