I have a datepicker and a dropdown menu with different delivery times. Basically, when the user clicks on any day from Mon to Fri, the dropdown timing menu has 4 values. But when the user clicks on Sat, the dropdown timing menu will then have 3 values.
The following is my code. (Take note I have already made changes such as disabling Sundays and dates that has past)
<script>
$( function() {
$("#datepicker").datepicker({
minDate: new Date(),
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 0), ''];
}
});
} );
</script>
<form name="checkout">
<input type="text" name="datepicker" id="datepicker" placeholder="Date of Delivery" onBlur="getWeekday();">
<div id="weekday">
<select name="time">
<option value="slot1">9am - 11am</option>
<option value="slot2">11am - 2pm</option>
<option value="slot3">2pm - 5pm</option>
<option value="slot4">7pm - 10pm</option>
</select>
</div>
<script>
function getWeekday() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("weekday").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "_weekday.php", true);
xhttp.send();
}
</script>
</form>
So as you can see, in my code, I have 3 things in it which is the datepicker, the form and the ajax code.
This is just what is in the _weekday.php
<select name="time">
<option value="slot1">9am - 11am</option>
<option value="slot2">11am - 2pm</option>
<option value="slot3">2pm - 5pm</option>
</select>
So basically, now what this does is that by default, the dropdown menu has 4 timeslots in it, but when the user clicks on the datepicker, it will have 3 timeslots to it.
So my question or rather the help I need is, how do I make it in such a way, that when only when any saturday is clicked on the datepicker, then the ajax activates and displays the 3 timeslots instead of the default 4. However, if its any other day, then it remains as the 4 timeslots.
Thank you.
<script>
function getWeekday() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
var pickedDate = new Date($('#datepicker').val());
if(pickedDate.getDay() == 6){
//Write code for 3 option in select
}
else{
//Write code for 4 option in select
}
}
};
xhttp.open("GET", "_weekday.php", true);
xhttp.send();
}
</script>
You just neee to chack using new Date().getDay() that which day is in datetimepicker, if the day is 6 which is saturday then append only 3 option otherwise for all weekday all other 4 option
or the best way to do is to pass the day of week in request to your php page where you can write the respective logic of day in php also pass the date in query param and check every condition in php which willbe good for security point of view also
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments