<!DOCTYPE html>
<html>
<head>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script  src="scripts6.js"></script>
   <script type="text/javascript" src="date.js"></script>
   <script type="text/javascript">
function SetDate()
{
var date = new Date();

var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();

if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;

var today = year + "-" + month + "-" + day;


document.getElementById('theDate').value = today;
}
</script>







<script>
  
$(document).ready(function(){
  $("#btn1").click(function(){
    // alert("Name: " + $("#search").val() + "" + "Date: "  + $("#theDate").val());
    $.post("checkingsql.php", {
        lastname : $("#lastname").val(),
       firstname : $("#firstname").val(),
      CheckingDate : $("#theDate").val(),
      CheckingIn: $("#CheckingIn").val()
   
    },
    function( status ){
      alert("Check IN status is: " + status);
    }
  
  )

    
  });
  $("#btn2").click(function(){
    // alert("HTML: " + $("#test").html());

    $.post("db.php", {
      lastname : $("#lastname").val(),
       firstname : $("#firstname").val(),
      CheckingDate : $("#theDate").val(),
      CheckingOut: $("#CheckingOut").val()
    },

    function( status){
      alert("Check out status is: " + status);
    }
  )


  });
});
</script>

</head>
<body onload="SetDate();">

<h2 id="test">Attendance Taking.</h2>


<!-- Search box. -->
<div>

<div class="field">
<label for="search">Search</label>
   <input  type="text" id="search" placeholder="Search" />
    <!-- Suggestions will be displayed in below div. -->
  <div class="field" id="display"></div>
   <hr>

  
 
  <div>

   <form  method="POST">

      <div class="field">
     First Name:<input name="firstname" type="text" id="firstname" />
      </div>

       <div class="field">
      Last Name:<input name="lastname" type="text" id="lastname"  />
      </div>

      <div class="field">
      <input name="CheckingDate" type="date" id="theDate" placeholder="Search" />
      </div>

    <div class="field">
         <input name="CheckingIn" type="time" id="CheckingIn" placeholder="Search" />
         </div>

   <button id="btn1">Check IN</button>
<button id="btn2">Check Out</button>

   </form>
        

</div> 
 







</body>