I have a SQL database and I made a php code with jQuery that won't show certain dates that are already full, but now I want to limit number of reservations for 1 time period on the same day.
To clarify, if a person chooses date 1.3.2022 at the time of 17:00 and submits it, and that becomes the 5th reservation at that date and time in the database, the next person that chooses date 1.3.2022 won't even have the option of 17:00 displayed. But the first next option would be 18:00. I have no experience with js since I'm into php and this part is necessary and unavoidable for me.
Here is how far I got:
<script>
var mysql = require('mysql');
var connection = mysql.createConnection({
host : 'LOCALHOST',
user : 'root',
password : '',
database : 'data'
});
con.connect(function(err) {
if (err) throw err;
con.query("SELECT time from tbl_reservations WHERE date='var selectDate'", function (err,result,field) {
if (err) throw err;
console.log(result);
});
});connection.end();
</script>
<div class="form-field col-lg-6 ">
<div class='input-group date' id='datetimepicker1'>
<span class="input-group-addon">
<input type='text'class="form-control input-text js-input" id="date" name="date" onchange="return getDate()"/>
</span>
</div>
<label class="label" for="date"></label>
</div>
<div class="form-field col-lg-6">
<select id="time" style="color:rgb(255,255,255,0.8)" class="input-text js-input" required>
<option style="display:none">Time</option>
<option id="16" value="16">16:00</option>
<option id="17" value="17">17:00</option>
<option id="18" value="18">18:00</option>
<option id="19" value="19">19:00</option>
<option id="20" value="20">20:00</option>
<option id="21" value="21">21:00</option>
</select>
<script>
function getDate(){
var selectDate = document.getElementById('date');
var userInput = selectDate.options(selectDate.selectedIndex).value
}
</script>