[add] hide btn on submit

et#36
tribikram 2 years ago
parent c08a99aaa6
commit b229e57e65
  1. 111
      public/frontend/css/style.css
  2. 107
      resources/views/appointment.blade.php
  3. 24
      resources/views/enquiry-form.blade.php

@ -140,7 +140,7 @@ h2{
opacity: 0; opacity: 0;
transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0);
} }
to { to {
opacity: 1; opacity: 1;
transform: none; transform: none;
@ -308,8 +308,8 @@ Responsive Codes
margin-bottom: 3rem; margin-bottom: 3rem;
} }
.slider-content p, .slider-content p,
.slider-content h2, .slider-content h2,
.slideDown, .slideDown,
.slideUp{ .slideUp{
position: relative; position: relative;
opacity: 0; opacity: 0;
@ -333,7 +333,7 @@ Responsive Codes
font-weight: 900; font-weight: 900;
font-family: "Font Awesome 5 Free"; font-family: "Font Awesome 5 Free";
position: absolute; position: absolute;
opacity: 0; opacity: 0;
top: 10px; top: 10px;
right: -20px; right: -20px;
transition: 0.5s; transition: 0.5s;
@ -416,7 +416,7 @@ Responsive Codes
font-size: 20px; font-size: 20px;
line-height: 29px; line-height: 29px;
text-align: center; text-align: center;
color: #326CBF; color: #326CBF;
margin-bottom: 0; margin-bottom: 0;
} }
.high-visa, .high-visa,
@ -692,7 +692,7 @@ Responsive Codes
.service-page-card{ .service-page-card{
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 4px 18px rgba(121, 121, 121, 0.05); box-shadow: 0px 4px 18px rgba(121, 121, 121, 0.05);
border-radius: 12px; border-radius: 12px;
transition: .4s; transition: .4s;
} }
.service-page-card{ .service-page-card{
@ -764,7 +764,7 @@ Responsive Codes
.mr-3 { .mr-3 {
margin-right: 30px; margin-right: 30px;
} }
.dinline { .dinline {
display: inline-block; display: inline-block;
} }
@ -1355,7 +1355,7 @@ Responsive Codes
color: #FFFFFF; color: #FFFFFF;
text-decoration: none; text-decoration: none;
background: #E22899; background: #E22899;
border-radius: 5px; border-radius: 5px;
transition: .6s; transition: .6s;
} }
.featured-article a:hover, .featured-article a:hover,
@ -1732,7 +1732,7 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
line-height: 48px; line-height: 48px;
letter-spacing: 0.005em; letter-spacing: 0.005em;
color: #326CBF; color: #326CBF;
} }
.enquiry-form-section p{ .enquiry-form-section p{
text-align: center; text-align: center;
} }
@ -2000,6 +2000,9 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
.displayBtn{ .displayBtn{
display: block; display: block;
} }
.displayEnqBtn{
display: inline-block;
}
/* Footer Css */ /* Footer Css */
/* mobile view css */ /* mobile view css */
@media only screen and (min-width: 320px) and (max-width: 480px) { @media only screen and (min-width: 320px) and (max-width: 480px) {
@ -2008,8 +2011,8 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
line-height: 38px; line-height: 38px;
} }
h2, h2,
.featured-article h2, .featured-article h2,
.blog-detail-desc h2, .blog-detail-desc h2,
.visa-content h3 { .visa-content h3 {
font-weight: 600; font-weight: 600;
font-size: 22px; font-size: 22px;
@ -2062,7 +2065,7 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
} }
.services-content h1, .services-content h1,
.why-us-desc h1, .why-us-desc h1,
.testimonials-desc h1, .testimonials-desc h1,
.blog-header h1, .blog-header h1,
.our-values-section h1, .our-values-section h1,
.studyabroad-banner-header h1, .studyabroad-banner-header h1,
@ -2077,18 +2080,18 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
.about-icons-section{ .about-icons-section{
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.services-section, .services-section,
.blog-section, .blog-section,
.study-australia-desc, .study-australia-desc,
.study-sydney-section, .study-sydney-section,
.study-melbourne-section, .study-melbourne-section,
.study-detail-section, .study-detail-section,
.scholarship-section, .scholarship-section,
.student-visa-section, .student-visa-section,
.about-header-section, .about-header-section,
.why-et, .why-et,
.student-visa-section, .student-visa-section,
.blogs-section, .why-et, .blogs-section, .why-et,
.faq-section, .faq-section,
.why-us-section, .why-us-section,
.testimonials-section, .testimonials-section,
@ -2259,7 +2262,7 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
.why-us-img, .why-us-img,
.blog-header p, .blog-header p,
.lets-chat-section p, .lets-chat-section p,
.overseas-section p, .overseas-section p,
.why-et-header p, .why-et-header p,
.about-banner-header p{ .about-banner-header p{
padding: 0; padding: 0;
@ -2268,19 +2271,19 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
.about-icons-section{ .about-icons-section{
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.services-section, .services-section,
.blog-section, .blog-section,
.study-australia-desc, .study-australia-desc,
.study-sydney-section, .study-sydney-section,
.study-melbourne-section, .study-melbourne-section,
.study-detail-section, .study-detail-section,
.scholarship-section, .scholarship-section,
.student-visa-section, .student-visa-section,
.about-header-section, .about-header-section,
.why-et, .why-et,
.student-visa-section, .student-visa-section,
.blogs-section, .why-et, .blogs-section, .why-et,
.blog-detail-section, .blog-detail-section,
.faq-section, .faq-section,
.why-us-section, .why-us-section,
.testimonials-section, .testimonials-section,
@ -2295,7 +2298,7 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
} }
.services-content h1, .services-content h1,
.why-us-desc h1, .why-us-desc h1,
.testimonials-desc h1, .testimonials-desc h1,
.blog-header h1{ .blog-header h1{
font-size: 32px; font-size: 32px;
line-height: 48px; line-height: 48px;
@ -2362,19 +2365,19 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
.about-icons-section{ .about-icons-section{
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.services-section, .services-section,
.blog-section, .blog-section,
.study-australia-desc, .study-australia-desc,
.study-sydney-section, .study-sydney-section,
.study-melbourne-section, .study-melbourne-section,
.study-detail-section, .study-detail-section,
.scholarship-section, .scholarship-section,
.student-visa-section, .student-visa-section,
.about-header-section, .about-header-section,
.why-et, .why-et,
.student-visa-section, .student-visa-section,
.blogs-section, .why-et, .blogs-section, .why-et,
.blog-detail-section, .blog-detail-section,
.faq-section, .faq-section,
.why-us-section, .why-us-section,
.testimonials-section, .testimonials-section,
@ -2418,7 +2421,7 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
.contact-form .row .col-md-8{ .contact-form .row .col-md-8{
width: 100%; width: 100%;
} }
.overseas-section p, .overseas-section p,
.why-et-header p, .why-et-header p,
.about-banner-header p, .about-banner-header p,
.lets-chat-section p{ .lets-chat-section p{
@ -2489,4 +2492,4 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
.review-card{ .review-card{
min-height: 37pc; min-height: 37pc;
} }
} }

@ -81,15 +81,18 @@
<input type="hidden" name="appointment_id" id="appointment_id"> <input type="hidden" name="appointment_id" id="appointment_id">
<div class="form-group mb-2"> <div class="form-group mb-2">
<label for="name">Name</label> <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>
<div class="form-group mb-2"> <div class="form-group mb-2">
<label for="email">Email</label> <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>
<div class="form-group mb-2"> <div class="form-group mb-2">
<label for="phone">Phone</label> <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>
<div class="form-group mb-2"> <div class="form-group mb-2">
<label for="notes">Notes</label> <label for="notes">Notes</label>
@ -99,7 +102,10 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <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> </div>
</div> </div>
@ -241,28 +247,79 @@
} }
function submitAppointment(event){ appNameError = document.getElementById('app-name-error');
event.preventDefault(); appEmailError = document.getElementById('app-email-error');
$.ajax({ appPhoneError = document.getElementById('app-phone-error');
url: "/appointment_submit", loaderenqBtn = document.getElementById('buttonenqload');
type: "post", appointmentBtn = document.getElementById('appointmentbtn');
data: $("form").serialize(), function validateAppName(){
success: function(response) { var appName = document.getElementById('app-name').value;
$("#modal").modal("hide"); if(appName.length == 0){
// var isAmStart = response.appointment.start_time < '12:00:00'; $('#name-email').focus();
// var isAmEnd = response.appointment.end_time < '12:00:00'; appNameError.innerHTML = "Name Field is required !";
return false;
Swal.fire({ }
title: 'Booked!!', appNameError.innerHTML = '';
text: 'Appointment Successfully Booked for '+response.appointment_detail['name']+' at '+response.formated_date +'('+response.appointment['start_time']+' - ' + response.appointment['end_time']+' )', return true;
icon: 'success' }
}).then(function(){
location.reload();
}
)
}
});
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> </script>

@ -256,7 +256,10 @@
</div> </div>
</div> </div>
<div class="col-md-12 text-center"> <div class="col-md-12 text-center">
<button type="submit" class="enquiry-from-btn">Submit</button> <button type="submit" class="enquiry-from-btn" id="enquirybtn">Submit</button>
<button type="submit" class="enquiry-from-btn buttonload" id="enquirybutnload" disabled>
<i class="fas fa-spinner fa-pulse"></i> Submiting
</button>
</div> </div>
</div> </div>
</form> </form>
@ -270,13 +273,13 @@
var status = "<?php echo $status; ?>"; var status = "<?php echo $status; ?>";
if(php_var.length !== 0){ if(php_var.length !== 0){
Swal.fire({ Swal.fire({
title: 'Submitted!!', title: 'Submitted!!',
text: php_var, text: php_var,
icon: status ? 'success' : 'error' icon: status ? 'success' : 'error'
}) })
} }
fnameError = document.getElementById('error-fname'); fnameError = document.getElementById('error-fname');
lnameError = document.getElementById('error-lname'); lnameError = document.getElementById('error-lname');
dobError = document.getElementById('error-dob'); dobError = document.getElementById('error-dob');
@ -533,6 +536,8 @@ if(php_var.length !== 0){
return true; return true;
} }
var enqloaderBtn = document.getElementById('enquirybutnload');
var enquirybtn = document.getElementById('enquirybtn');
function submitEnquiry(){ function submitEnquiry(){
if(!validatefName() || !validatelName() || !validateDob() || !eCob() || !eGender() || if(!validatefName() || !validatelName() || !validateDob() || !eCob() || !eGender() ||
!validateAddress() || !validateEmail() || !validatePhone() || !validateQualification() || !validateAddress() || !validateEmail() || !validatePhone() || !validateQualification() ||
@ -540,7 +545,8 @@ if(php_var.length !== 0){
!wExperience() || !validateImmigrationHistory() || !validateStudyField()){ !wExperience() || !validateImmigrationHistory() || !validateStudyField()){
return false; return false;
}else{ }else{
enqloaderBtn.classList.add('displayEnqBtn');
enquirybtn.classList.add('buttonload')
} }
} }
</script> </script>

Loading…
Cancel
Save