So I'm building a booking system where with php I disabled all the unavailable dates now I need to get a selected date and display available times based on the selected date, meaning if there are more than 5 reservations for 1 time period in a selected date, input for that time period will be unavailable.

I'd do it with something like this

$sql = "SELECT time FROM reservations WHERE date=$date;  //date would be a js variable
//Then I would start the query and count the rows
if($count>5)
{ //here I would just make the input of that time period hidden}

But here is where my problem lies, I need to get the date variable before submitting the form I tried to do that with onchange function with js

<input type='text'class="form-control input-text js-input" id="date" name="date" onchange="getDate"/>

And whenever someone chooses the date I tried to get the date by this code, and try to echo it in php

<script>
   function getDate() {
       var selectedDate = document.getElementById("date").value;
   <?php $selectedDate = "<script>document.write(selectedDate)</script>";?>
   <?php echo "<p style='font-size:100px;color:white;'>$selectedDate</p>";?>
   }
</script>

I do not get the date displayed as I thought I should, I don't get any errors nor anything