<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">


<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("memberCheckinsql.php", {
      CheckingName : $("#search").val(),
      CheckingDate : $("#theDate").val(),
      CheckingIn: $("#CheckingIn").val()
   
    },
    function( status ){
      alert("Check IN status is: " + status);
    }
  
  )

    

   

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

    $.post("memberCheckoutsql.php", {
      name: $("#search").val(),
      date: $("#theDate").val()
    },

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


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

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


<div class="field">
<label for="search">Search</label>
   <input name="CheckingName" type="text" id="search" placeholder="Search" />
   </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>







<!-- Suggestions will be displayed in below div. -->
<div class="field" id="display"></div>


</body>