[add] hide btn on submit

public/frontend/css/style.css

@@ -2000,6 +2000,9 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
 .displayBtn{
     display: block;
 }
+.displayEnqBtn{
+    display: inline-block;
+}
 /* Footer Css */
 /* mobile view css */
 @media only screen and (min-width: 320px) and (max-width: 480px) {

resources/views/appointment.blade.php

@@ -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,8 +247,58 @@
 
     }
 
-    function submitAppointment(event){
-        event.preventDefault();
+    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",
@@ -252,6 +308,7 @@
                     // 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']+' )',
@@ -262,7 +319,7 @@
                     )
                 }
             });
-
+        }
     }
 
 </script>

resources/views/enquiry-form.blade.php

@@ -256,7 +256,10 @@
                     </div>
                 </div>
                 <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>
         </form>
@@ -270,13 +273,13 @@
 
         var status = "<?php echo $status; ?>";
 
-if(php_var.length !== 0){
+    if(php_var.length !== 0){
         Swal.fire({
             title: 'Submitted!!',
             text: php_var,
             icon: status ? 'success' : 'error'
         })
-}
+    }
         fnameError = document.getElementById('error-fname');
         lnameError = document.getElementById('error-lname');
         dobError = document.getElementById('error-dob');
@@ -533,6 +536,8 @@ if(php_var.length !== 0){
             return true;
         }
 
+        var enqloaderBtn = document.getElementById('enquirybutnload');
+        var enquirybtn = document.getElementById('enquirybtn');
         function submitEnquiry(){
             if(!validatefName() || !validatelName() || !validateDob() || !eCob() || !eGender() ||
             !validateAddress() || !validateEmail() || !validatePhone() || !validateQualification() ||
@@ -540,7 +545,8 @@ if(php_var.length !== 0){
             !wExperience() || !validateImmigrationHistory() || !validateStudyField()){
                 return false;
             }else{
-
+                enqloaderBtn.classList.add('displayEnqBtn');
+                enquirybtn.classList.add('buttonload')
             }
         }
     </script>