I am trying to build an appointment booking website using express, ejs and MongoDB. When request is sent to '/booking', book page is displayed with all the details of the doctor . For every doctor on clicking on book button, a form is added dynamically. A js event is added to the book button so that when the user clicks on that button, that particular doctor id can be accessed and sent back to server using ajax.My basic idea i was to the value of 'i' when the button is clicked and get the doctor_id value at that particular 'i' index from doctprs array. But ejs will get loaded before javascript so I am not able to do that. Please help me get the value of the selected doctor_id.
Update Inside the form in the div id="myCalendar" I am displaying a calendar from which a user can select the date. I want to get the doctor_id which the user selected and then send it using a axios request to the server and then get the time slots of that particular doctor on that particular date and display it in the form so that the user can select a particular time slot and book an appointment on that day for that calendar.
app.js
app.get("/booking",function(req,res){
Doctor.find().populate('doctor_id','name id').populate('hospital_id').then((doctors,err)=>{
res.render("book",{doctor:doctors});
}).catch(err=> req.flash('error',"Something went wrong!Try again!"));
});
app.post("/time_slots",function(req,res){
items=Appointment.find({doctor_id: mongoose.Types.ObjectId(req.body.doctor), appointment_date:new Date(req.body.app_date)}).then((slots,err)=>{
let data=JSON.stringify(slots);
console.log(req.body.doctor+" "+req.body.app_date);
console.log(slots);
return res.json({slots: data})
}).catch(err=> req.flash('error',"Something went wrong!Try again!"))
});
book.ejs
<% for(i=0;i<doctor.length;i++){ %>
<div id="details<%= i %>">
<%= doctor[i].doctor_id['id'] %>
<%= doctor[i].doctor_id['name'] %>
<%= doctor[i].speciality %>
<%= doctor[i].experience %>
<%= doctor[i].hospital_id.name %>
<%= doctor[i].hospital_id.location %>
<button class="btn btn-success booking_btn" id="<%= i %>">Book</button>
<br><br><br>
</div>
<% } %>
<script>
var buttons= document.getElementsByClassName("booking_btn");
for(let i = 0; i <buttons.length; i++) {
buttons[i].addEventListener("click", function() {
var booking_form=` <form action="/booking" method="post" id="book-appointment-form">
<div id="myCalendar" class="vanilla-calendar" value=""></div>
<div id="boxes"></div>
<button type="submit" class="btn btn-success">Confirm</button>
</form>`
document.getElementById("details"+i).insertAdjacentHTML( 'beforeend', booking_form);
createCalendar();
sendSelectedDate(i);
})
}
function createCalendar(){
calendarSet=true;
myCalendar = new VanillaCalendar({
selector: "#myCalendar",
pastDates: false,
availableWeekDays: [
{day: 'monday'},
{day: 'tuesday'},
{day: 'wednesday'},
{day: 'thursday'},
{day: 'friday'}
],
datesFilter: true
});
}
function sendSelectedDate(i){
let date_selected = document.getElementById("myCalendar");
document.getElementsByClassName("vanilla-calendar-body")[0].addEventListener("click", function(e) {
e.preventDefault();
var t=<%= doctor[i].doctor_id['id'] %>
var d =new Date(date_selected.value).toLocaleDateString('ko-KR').slice(0, -1).replaceAll('. ','-');
axios.post('/time_slots', {app_date: d,doctor: t}).then(function (response) {
var $section = $('<div class="col-md-4"></div>');
(JSON.parse(response.data.slots)).forEach(function(slot) {
$section.append(`<button>${slot.time_slot}</button>`);
});
$('#boxes').html($section);
}).catch(function(e) {
console.log(e);
console.log("Please try again later.");
})
})
}
</script>
