@ -81,15 +81,18 @@
< input type = "hidden" name = "appointment_id" id = "appointment_id" >
< div class = "form-group mb-2" >
< label for = "name" > Name< / label >
< input type = "text" class = "form-control mt-1" id = "name" name = "name" required >
< input type = "text" class = "form-control mt-1" id = "app-name" name = "name" onkeyup = "validateAppName()" >
< span class = "error" id = "app-name-error" > < / span >
< / div >
< div class = "form-group mb-2" >
< label for = "email" > Email< / label >
< input type = "email" class = "form-control mt-1" id = "email" name = "email" required >
< input type = "email" class = "form-control mt-1" id = "app-email" name = "email" onkeyup = "validateAppEmail()" >
< span class = "error" id = "app-email-error" > < / span >
< / div >
< div class = "form-group mb-2" >
< label for = "phone" > Phone< / label >
< input type = "tel" class = "form-control mt-1" id = "phone" name = "phone" required >
< input type = "tel" class = "form-control mt-1" id = "app-phone" name = "phone" onkeyup = "validateAppPhone()" >
< span class = "error" id = "app-phone-error" > < / span >
< / div >
< div class = "form-group mb-2" >
< label for = "notes" > Notes< / label >
@ -99,7 +102,10 @@
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-bs-dismiss = "modal" > Close< / button >
< button type = "button" onclick = "submitAppointment(event)" class = "btn btn-primary" > Book Appointment< / button >
< button type = "button" onclick = "submitAppointment()" class = "btn btn-primary" id = "appointmentbtn" > Book Appointment< / button >
< button class = "buttonload btn btn-primary" id = "buttonenqload" disabled >
< i class = "fas fa-spinner fa-pulse" > < / i > Submiting
< / button >
< / div >
< / div >
< / div >
@ -241,28 +247,79 @@
}
function submitAppointment(event){
event.preventDefault();
$.ajax({
url: "/appointment_submit",
type: "post",
data: $("form").serialize(),
success: function(response) {
$("#modal").modal("hide");
// var isAmStart = response.appointment.start_time < '12:00:00';
// var isAmEnd = response.appointment.end_time < '12:00:00';
Swal.fire({
title: 'Booked!!',
text: 'Appointment Successfully Booked for '+response.appointment_detail['name']+' at '+response.formated_date +'('+response.appointment['start_time']+' - ' + response.appointment['end_time']+' )',
icon: 'success'
}).then(function(){
location.reload();
}
)
}
});
appNameError = document.getElementById('app-name-error');
appEmailError = document.getElementById('app-email-error');
appPhoneError = document.getElementById('app-phone-error');
loaderenqBtn = document.getElementById('buttonenqload');
appointmentBtn = document.getElementById('appointmentbtn');
function validateAppName(){
var appName = document.getElementById('app-name').value;
if(appName.length == 0){
$('#name-email').focus();
appNameError.innerHTML = "Name Field is required !";
return false;
}
appNameError.innerHTML = '';
return true;
}
function validateAppEmail(){
var appEmail = document.getElementById('app-email').value;
if(appEmail.length == 0){
$('#name-email').focus();
appEmailError.innerHTML = "Email Field is required !";
return false;
}
if(!appEmail.match(/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(.\w{2,3})+$/)){
appEmailError.innerHTML = "Invalid email address";
return false;
}
appEmailError.innerHTML = '';
return true;
}
function validateAppPhone(){
var appPhone = document.getElementById('app-phone').value;
if(appPhone.length == 0){
$('#app-phone').focus();
appPhoneError.innerHTML = "Phone Field is required !";
return false;
}
if(!appPhone.match(/^\d{10}$/)){
appPhoneError.innerHTML = "Invalid mobile number";
return false;
}
appPhoneError.innerHTML = '';
return true;
}
function submitAppointment(){
if(!validateAppName() || !validateAppEmail() || !validateAppPhone()){
return false;
}else{
loaderenqBtn.classList.add('displayBtn')
appointmentBtn.classList.add('buttonload')
$.ajax({
url: "/appointment_submit",
type: "post",
data: $("form").serialize(),
success: function(response) {
$("#modal").modal("hide");
// var isAmStart = response.appointment.start_time < '12:00:00';
// var isAmEnd = response.appointment.end_time < '12:00:00';
loaderenqBtn.classList.remove('displayBtn');
Swal.fire({
title: 'Booked!!',
text: 'Appointment Successfully Booked for '+response.appointment_detail['name']+' at '+response.formated_date +'('+response.appointment['start_time']+' - ' + response.appointment['end_time']+' )',
icon: 'success'
}).then(function(){
location.reload();
}
)
}
});
}
}
< / script >
