Home
About Us
Head Office
Admissions
Academics
Contact
Enquire Now
Home
About Us
Head Office
Admissions
Academics
Contact
Transport
World Class Facilities
Home
Transport
</div> </section> <!-- Enquiry Form Section --> <!-- Enquiry with Calendar Section --> <section id="enq-fm-section" class="py-5 position-relative overflow-hidden text-black" > <div class="container"> <!-- Decorative SVGs --> <img src="assets/images/icons/form-top.svg" class="position-absolute start-0 top-0 d-none d-md-block" alt="Decor Left" style="width: 200px; left: 0; top: 0" /> <img src="assets/images/icons/form-btm.svg" class="position-absolute end-0 bottom-0 d-none d-md-block" alt="Decor Right" style="width: 200px; right: 0; bottom: 0" /> <div class="text-center mb-5"> <h2 class="fw-bold"> <img src="assets/images/icons/ico-1.png" width="30" class="mb-2" alt="Calendar Icon" />Visit Our Campus </h2> <p class="text-black small"> Explore our learning spaces, interact with our educators, and get a feel of life at Pallavi. </p> </div> <div class="row g-4 align-items-start"> <!-- Enquiry Form --> <div class="col-lg-6 mt-5"> <form id="enq-fm-form" class="enq-fm-form" novalidate> <div class="mb-3 d-flex flex-column flex-md-row gap-2"> <div class="w-100"> <input type="text" id="studentName" name="studentName" class="form-control enq-fm-input" placeholder="Student Name *" required minlength="2" maxlength="50" pattern="^[A-Za-z\s\.]{2,}$" title="Only letters and spaces, min 2 characters" autocomplete="given-name" /> <div class="invalid-feedback-custom text-danger small mt-1"></div> </div> <div class="w-100"> <input type="text" id="parentName" name="parentName" class="form-control enq-fm-input" placeholder="Parent Name *" required minlength="2" maxlength="50" pattern="^[A-Za-z\s\.]{2,}$" title="Only letters and spaces, min 2 characters" autocomplete="name" /> <div class="invalid-feedback-custom text-danger small mt-1"></div> </div> </div> <div class="mb-3 d-flex flex-column flex-md-row gap-2"> <div class="w-100"> <input type="tel" id="phoneNumber" name="phoneNumber" class="form-control enq-fm-input" placeholder="Phone Number *" required pattern="^[6-9]\d{9}$" maxlength="10" title="Enter a valid 10-digit number starting with 6-9" autocomplete="tel" /> <div class="invalid-feedback-custom text-danger small mt-1"></div> </div> <div class="w-100"> <input type="email" id="email" name="email" class="form-control enq-fm-input" placeholder="Email Address *" required maxlength="100" pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" title="Enter a valid email address" autocomplete="email" /> <div class="invalid-feedback-custom text-danger small mt-1"></div> </div> </div> <div class="mb-3 d-flex flex-column flex-md-row gap-2"> <div class="w-100"> <select id="curriculum" name="curriculum" class="form-select enq-fm-input" required > <option value="">Select Curriculum *</option> <option value="CBSE">CBSE</option> <!-- <option value="CAMBRIDGE INTERNATIONAL">CAMBRIDGE INTERNATIONAL</option> --> </select> <div class="invalid-feedback-custom text-danger small mt-1"></div> </div> <div class="w-100"> <select id="grade" name="grade" class="form-select enq-fm-input" required > <option value="">Admission for (Grade) *</option> </select> <div class="invalid-feedback-custom text-danger small mt-1"></div> </div> </div> <div class="mb-3"> <input type="text" id="localityInput" name="locality" class="form-control enq-fm-input" placeholder="Locality / Area *" required minlength="3" maxlength="100" title="Please enter at least 3 characters" autocomplete="address-level2" /> <div class="invalid-feedback-custom text-danger small mt-1"></div> </div> <div class="mb-3"> <input type="text" id="enq-selected-date" name="visitDate" class="form-control enq-fm-input" placeholder="Select Visit Date from Calendar *" required readonly /> <div class="invalid-feedback-custom text-danger small mt-1"></div> </div> <input type="hidden" id="schoolName" name="schoolName" value="PMS Ramannapet" /> <button type="submit" class="btn btn-primary rounded-pill px-4" id="submitBtn"> <span id="submitBtnText">Submit Enquiry</span> <span id="submitBtnLoader" class="spinner-border spinner-border-sm ms-2 d-none" role="status"></span> </button> </form> </div> <!--Toast Notification--> <div id="toast-notification" class="position-fixed top-0 end-0 p-3" style="z-index: 9999; display: none;"> <div id="toast-content" class="toast align-items-center border-0 show fade" role="alert"> <div class="d-flex"> <div id="toast-body-text" class="toast-body text-white d-flex align-items-center gap-2"> <span id="toast-icon">⚠️</span> <span id="toast-message">Error message here</span> </div> <button type="button" class="btn-close btn-close-white me-2 m-auto" onclick="closeToast()"></button> </div> </div> </div> <!--Script for Form--> <script> function showToast(message, type = "error") { const toast = document.getElementById("toast-notification"); const toastContent = document.getElementById("toast-content"); const toastMsg = document.getElementById("toast-message"); const toastIcon = document.getElementById("toast-icon"); toastMsg.textContent = message; toastIcon.textContent = type === "success" ? "✅" : "⚠️"; toastContent.classList.remove("bg-success", "bg-danger"); toastContent.classList.add(type === "success" ? "bg-success" : "bg-danger"); toast.style.display = "block"; setTimeout(() => { toast.style.display = "none"; }, 4000); } function closeToast() { document.getElementById("toast-notification").style.display = "none"; } document.addEventListener("DOMContentLoaded", () => { const form = document.getElementById("enq-fm-form"); const studentNameInput = document.getElementById("studentName"); const parentNameInput = document.getElementById("parentName"); const phoneInput = document.getElementById("phoneNumber"); const emailInput = document.getElementById("email"); const curriculumSelect = document.getElementById("curriculum"); const gradeSelect = document.getElementById("grade"); const localityInput = document.getElementById("localityInput"); const dateInput = document.getElementById("enq-selected-date"); const submitBtn = document.getElementById("submitBtn"); const submitBtnText = document.getElementById("submitBtnText"); const submitBtnLoader = document.getElementById("submitBtnLoader"); // Validation rules const validationRules = { studentName: { regex: /^[A-Za-z\s\.]{2,50}$/, message: "Enter a valid name (letters only, 2-50 characters)" }, parentName: { regex: /^[A-Za-z\s\.]{2,50}$/, message: "Enter a valid name (letters only, 2-50 characters)" }, phoneNumber: { regex: /^[6-9]\d{9}$/, message: "Enter a valid 10-digit Indian mobile number" }, email: { regex: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: "Enter a valid email address" }, locality: { regex: /^.{3,100}$/, message: "Locality must be between 3-100 characters" } }; // Show error message function showFieldError(input, message) { const feedbackDiv = input.parentElement.querySelector(".invalid-feedback-custom"); if (feedbackDiv) { feedbackDiv.textContent = message; feedbackDiv.style.display = "block"; } input.classList.add("is-invalid"); input.classList.remove("is-valid"); } // Show success state function showFieldSuccess(input) { const feedbackDiv = input.parentElement.querySelector(".invalid-feedback-custom"); if (feedbackDiv) { feedbackDiv.textContent = ""; feedbackDiv.style.display = "none"; } input.classList.remove("is-invalid"); input.classList.add("is-valid"); } // Clear field state function clearFieldState(input) { const feedbackDiv = input.parentElement.querySelector(".invalid-feedback-custom"); if (feedbackDiv) { feedbackDiv.textContent = ""; feedbackDiv.style.display = "none"; } input.classList.remove("is-invalid", "is-valid"); } // Validate individual field function validateField(input) { const value = input.value.trim(); const fieldName = input.name || input.id; // Check if field is required and empty if (input.hasAttribute("required") && !value) { showFieldError(input, "This field is required"); return false; } // Skip further validation if empty and not required if (!value) { clearFieldState(input); return true; } // Validate against regex rules if (validationRules[fieldName]) { if (!validationRules[fieldName].regex.test(value)) { showFieldError(input, validationRules[fieldName].message); return false; } } // Special validation for select fields if (input.tagName === "SELECT" && !value) { showFieldError(input, "Please select an option"); return false; } showFieldSuccess(input); return true; } // Add real-time validation on blur [studentNameInput, parentNameInput, phoneInput, emailInput, curriculumSelect, gradeSelect, localityInput, dateInput].forEach(input => { if (input) { input.addEventListener("blur", () => validateField(input)); // Clear error on focus input.addEventListener("focus", () => { if (input.classList.contains("is-invalid")) { clearFieldState(input); } }); // Validate on input for text fields if (input.type !== "select-one" && !input.readOnly) { input.addEventListener("input", () => { if (input.value.trim()) { validateField(input); } }); } } }); // Phone number: allow only digits phoneInput.addEventListener("keypress", (e) => { if (!/^\d$/.test(e.key) && !["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"].includes(e.key)) { e.preventDefault(); } }); // Name fields: allow only letters and spaces [studentNameInput, parentNameInput].forEach(input => { input.addEventListener("keypress", (e) => { if (!/^[A-Za-z\s\.]$/.test(e.key) && !["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"].includes(e.key)) { e.preventDefault(); } }); }); const cbseGrades = [ "Nursery", "LKG", "UKG", "Grade 1", "Grade 2", "Grade 3", "Grade 4", "Grade 5", "Grade 6", "Grade 7" ]; const cambridgeGrades = [ "EY-1 (Nur)", "EY-2 (PP1/LKG)", "EY-3 (PP2/UKG)", "Grade 1", "Grade 2", "Grade 3" ]; curriculumSelect.addEventListener("change", () => { const selected = curriculumSelect.value; let grades = []; if (selected === "CBSE") grades = cbseGrades; else if (selected === "CAMBRIDGE INTERNATIONAL") grades = cambridgeGrades; gradeSelect.innerHTML = `<option selected value="">Admission for (Grade)</option>`; grades.forEach((grade) => { const opt = document.createElement("option"); opt.value = grade; opt.textContent = grade; gradeSelect.appendChild(opt); }); }); // ✅ Auto-capture Location on Focus let locationFetched = false; localityInput.addEventListener("focus", () => { if (locationFetched || localityInput.value.trim() !== "") return; if (!navigator.geolocation) { showToast("Geolocation not supported by your browser.", "error"); return; } navigator.geolocation.getCurrentPosition( async (position) => { const { latitude, longitude } = position.coords; locationFetched = true; try { const res = await fetch( `https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${latitude}&lon=${longitude}` ); const data = await res.json(); if (data && data.address) { const locationName = data.address.suburb || data.address.village || data.address.city || data.address.town || data.display_name; localityInput.value = locationName; showToast("Location auto-filled.", "success"); } else { showToast("Could not determine location.", "error"); } } catch (err) { console.error(err); showToast("Error retrieving location info.", "error"); } }, () => { showToast("Permission denied. Please enter location manually.", "error"); } ); }); form.addEventListener("submit", async (event) => { event.preventDefault(); // Validate all fields before submission const allFields = [ studentNameInput, parentNameInput, phoneInput, emailInput, curriculumSelect, gradeSelect, localityInput, dateInput ]; let isFormValid = true; let firstInvalidField = null; // Validate each field allFields.forEach(field => { if (!validateField(field)) { isFormValid = false; if (!firstInvalidField) { firstInvalidField = field; } } }); // If form is invalid, focus on first invalid field and show error if (!isFormValid) { if (firstInvalidField) { firstInvalidField.focus(); firstInvalidField.scrollIntoView({ behavior: "smooth", block: "center" }); } showToast("Please fill all required fields correctly.", "error"); return; } // Get form values const studentName = studentNameInput.value.trim(); const parentName = parentNameInput.value.trim(); const phone = phoneInput.value.trim(); const email = emailInput.value.trim(); const curriculum = curriculumSelect.value.trim(); const grade = gradeSelect.value.trim(); const locality = localityInput.value.trim(); const visitDate = dateInput.value.trim(); // Additional sanity checks if (!studentName || !parentName || !phone || !email || !curriculum || !grade || !locality || !visitDate) { showToast("Please fill all required fields.", "error"); return; } // Prepare data with actual field values (no IDs) const data = { studentName: studentName, parentName: parentName, phoneNumber: phone, email: email, curriculum: curriculum, grade: grade, locality: locality, visitDate: visitDate, schoolName: document.getElementById("schoolName").value, submittedAt: new Date().toISOString(), source: "pmsramannapet.com", formType: "campus-visit-enquiry" }; // Show loading state submitBtn.disabled = true; submitBtnText.textContent = "Submitting..."; submitBtnLoader.classList.remove("d-none"); try { const response = await fetch( "proxy.php?action=zap", { method: "POST", headers: { "Content-Type": "application/json", "Accept": "application/json" }, body: JSON.stringify(data), } ); if (response.ok || response.status === 200) { // Reset form form.reset(); gradeSelect.innerHTML = `<option selected value="">Admission for (Grade) *</option>`; // Clear all validation states allFields.forEach(field => clearFieldState(field)); showToast("Form submitted successfully! We'll contact you soon.", "success"); // Reset location fetched flag locationFetched = false; } else { const errorData = await response.text(); console.error("Server error:", errorData); showToast("Failed to submit form. Please try again.", "error"); } } catch (error) { console.error("Submission error:", error); showToast("Network error. Please check your connection and try again.", "error"); } finally { // Reset button state submitBtn.disabled = false; submitBtnText.textContent = "Submit Enquiry"; submitBtnLoader.classList.add("d-none"); } }); }); </script> <!-- Custom Calendar --> <div class="col-lg-6"> <div class="calendar-box p-4 h-100 bg-white rounded-4 text-dark"> <div class="d-flex justify-content-between align-items-center mb-3"> <button class="nav-btn" onclick="enqCalChangeMonth(-1)">❮</button> <div class="calendar-header" id="enqCalMonthYearLabel"></div> <button class="nav-btn" onclick="enqCalChangeMonth(1)">❯</button> </div> <div class="calendar-grid mb-2" id="enqCalLabels"></div> <div class="calendar-grid" id="enqCalDays"></div> </div> </div> </div> </div> </section> <!-- Footer Section --> <!-- Website Footer Section --> <footer class="ft-pp-footer text-white position-relative pt-5 pb-3"> <div class="ft-pp-footer-bg position-absolute top-0 start-0 w-100 h-100 z-n1"></div> <div class="container position-relative mt-40"> <div class="row justify-content-between gy-4"> <!-- Brand and Social --> <div class="col-xl-4 col-lg-6"> <div class="d-flex align-items-center gap-3 mb-3"> <img src="assets/images/logo/PMSR_footer.png" alt="Pallavi Group Logo" class="ft-pp-footer-logo"> </div> <p class="small pe-lg-5">Empowering young minds since 1994. A legacy of academic excellence, innovation and integrity.</p> <div class="d-flex gap-3 mt-3"> <a href="https://www.facebook.com/pms.ramannapet/" class="ft-pp-footer-icon" target="_blank"><i class="bi bi-facebook"></i></a> <a href="https://www.instagram.com/pms_ramannapet/" class="ft-pp-footer-icon" target="_blank"><i class="bi bi-instagram"></i></a> <a href="https://x.com/pms_ramannapet" class="ft-pp-footer-icon" target="_blank"><i class="bi bi-twitter"></i></a> <a href="https://www.youtube.com/@pms_ramannapet" class="ft-pp-footer-icon" target="_blank"><i class="bi bi-youtube"></i></a> <a href="https://www.linkedin.com/company/pallavi-model-school-ramannapet" class="ft-pp-footer-icon" target="_blank"><i class="bi bi-linkedin"></i></a> </div> </div> <!-- Our Branches --> <div class="col-xl-2 col-lg-3 col-md-6 d-none d-md-block"> <h6 class="fw-bold text-warning mb-3">Quick Links</h6> <ul class="list-unstyled ft-pp-footer-links"> <li><a href="aboutus.php">About Us</a></li> <li><a href="academics.php">Academics</a></li> <li><a href="admissions.php">Admissions</a></li> <li><a href="#">Careers</a></li> </ul> </div> <!-- Support --> <div class="col-xl-2 col-lg-3 col-md-6 d-none d-md-block"> <h6 class="fw-bold text-warning mb-3"><br></h6> <ul class="list-unstyled ft-pp-footer-links"> <li><a href="transport.php">Transport</a></li> <li><a href="#">Sports</a></li> <li><a href="privacy-policy.php">Privacy Policy</a></li> <li><a href="../sitemap.xml">Site Map</a></li> </ul> </div> <!-- Address --> <div class="col-xl-4 col-lg-6"> <h6 class="fw-bold text-warning mb-3">Address</h6> H. No 7-151/19, Chityal Road,Ramannapet, yadadri Bhuvanagiri District ,Telangana State, PIN code - 508113 </div> </div> <hr class="border-light mt-5"> <div class="d-flex justify-content-between small"> <p class="mb-0">All rights reserved / PGOS <span id="ft-pp-currentYear"></span></p> <p class="mb-0">Designed & Developed by <a href="https://k-innovative.com" class="text-warning">K-innovative Hub</a></p> </div> </div> </footer> <!-- Announcement Popup (optional) --> <div id="ft-pp-announcementPopup" class="ft-pp-popup-overlay d-none"> <div class="ft-pp-popup-content"> <button class="ft-pp-popup-close" onclick="ftPpCloseAnnouncement()">×</button> <img src="assets/images/test/unnamed.jpg" alt="Announcement" class="img-fluid rounded-3"> </div> </div> <!-- Enquiry Popup Form --> <div id="ft-pp-enquiryPopup" class="ft-pp-popup-overlay d-none"> <div class="ft-pp-popup-content p-4 bg-white rounded-4 shadow"> <button class="ft-pp-popup-close" onclick="ftPpCloseEnquiry()">×</button> <h3 class="fw-bold mb-1">Enquiry Form</h3> <p class="text-success mb-3">Registrations open for the academic year 2026 - 2027</p> <!-- ✅ Popup Enquiry Form --> <form id="ft-pp-enquiryForm" novalidate> <div class="row g-3" id="ft-pp-form-fields"> <div class="col-md-6"> <input type="text" class="form-control" id="ft-pp-studentName" name="studentName" placeholder="Student Name *" data-required="true" /> <div class="invalid-feedback-custom" style=" display: none; color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem; "></div> </div> <div class="col-md-6"> <input type="text" class="form-control" id="ft-pp-parentName" name="parentName" placeholder="Parent Name *" data-required="true" /> <div class="invalid-feedback-custom" style=" display: none; color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem; "></div> </div> <div class="col-md-6"> <div class="d-flex"> <select class="form-select me-2" style="max-width: 80px"> <option>+91</option> <option>+1</option> </select> <div style="flex: 1"> <input type="text" class="form-control" id="ft-pp-phoneNumber" name="phoneNumber" placeholder="Phone Number *" data-required="true" maxlength="10" /> </div> </div> <div class="invalid-feedback-custom" style=" display: none; color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem; "></div> </div> <div class="col-md-6"> <input type="email" class="form-control" id="ft-pp-email" name="email" placeholder="Email *" data-required="true" /> <div class="invalid-feedback-custom" style=" display: none; color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem; "></div> </div> <!-- Curriculum --> <div class="col-md-6"> <select class="form-select" id="ft-pp-curriculum" name="curriculum" data-required="true"> <option value="" selected disabled>Curriculum *</option> <option value="CBSE">CBSE</option> <!-- <option value="CAMBRIDGE INTERNATIONAL">Cambridge International</option> --> </select> <div class="invalid-feedback-custom" style=" display: none; color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem; "></div> </div> <!-- Grade (Auto-filled based on Curriculum) --> <div class="col-md-6"> <select class="form-select" id="ft-pp-grade" name="grade" data-required="true"> <option value="" selected disabled>Admission for (Grade) *</option> <!-- options populated by JS --> </select> <div class="invalid-feedback-custom" style=" display: none; color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem; "></div> </div> <!-- Locality (auto-fill on focus) --> <div class="col-md-12"> <input type="text" class="form-control" id="ft-pp-locality" name="locality" placeholder="Locality *" data-required="true" /> <div class="invalid-feedback-custom" style=" display: none; color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem; "></div> </div> </div> <input type="hidden" id="schoolName" name="schoolName" value="PMS Ramannapet" /> <!-- Submit --> <div class="text-end mt-4"> <button type="submit" id="ft-pp-submit-btn" class="btn btn-success px-4" disabled> Submit </button> </div> <!-- ✅ Custom Professional Notification --> <div id="ft-pp-success-msg" class="custom-success-msg" style="display: none"> <div class="success-icon">✅</div> <p>Thank you! Your enquiry has been submitted successfully.</p> </div> </form> <!-- ✅ Toast --> <div id="custom-toast" class="custom-toast" style="display: none"> <span id="custom-toast-icon">⚠</span> <span id="custom-toast-msg"></span> </div> <script> document.addEventListener("DOMContentLoaded", () => { const form = document.getElementById("ft-pp-enquiryForm"); const submitBtn = document.getElementById("ft-pp-submit-btn"); const studentName = document.getElementById("ft-pp-studentName"); const parentName = document.getElementById("ft-pp-parentName"); const phone = document.getElementById("ft-pp-phoneNumber"); const email = document.getElementById("ft-pp-email"); const curriculum = document.getElementById("ft-pp-curriculum"); const grade = document.getElementById("ft-pp-grade"); const locality = document.getElementById("ft-pp-locality"); // Validation rules const validationRules = { studentName: { regex: /^[A-Za-z\s\.]{2,50}$/, message: "Enter a valid name (letters only, 2-50 characters)", }, parentName: { regex: /^[A-Za-z\s\.]{2,50}$/, message: "Enter a valid name (letters only, 2-50 characters)", }, phoneNumber: { regex: /^[6-9]\d{9}$/, message: "Enter a valid 10-digit Indian mobile number", }, email: { regex: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: "Enter a valid email address", }, locality: { regex: /^.{3,100}$/, message: "Locality must be between 3-100 characters", }, }; function showToast(message, type = "error") { const toast = document.getElementById("custom-toast"); const toastMsg = document.getElementById("custom-toast-msg"); const toastIcon = document.getElementById("custom-toast-icon"); toastMsg.textContent = message; toastIcon.textContent = type === "success" ? "✅" : "⚠"; toast.className = "custom-toast" + (type === "success" ? " success" : ""); toast.style.display = "block"; setTimeout(() => (toast.style.display = "none"), 4000); } // Show error message function showFieldError(input, message) { const feedbackDiv = input.parentElement.querySelector( ".invalid-feedback-custom" ); if (feedbackDiv) { feedbackDiv.textContent = message; feedbackDiv.style.display = "block"; } input.classList.add("is-invalid"); input.classList.remove("is-valid"); } // Show success state function showFieldSuccess(input) { const feedbackDiv = input.parentElement.querySelector( ".invalid-feedback-custom" ); if (feedbackDiv) { feedbackDiv.textContent = ""; feedbackDiv.style.display = "none"; } input.classList.remove("is-invalid"); input.classList.add("is-valid"); } // Clear field state function clearFieldState(input) { const feedbackDiv = input.parentElement.querySelector( ".invalid-feedback-custom" ); if (feedbackDiv) { feedbackDiv.textContent = ""; feedbackDiv.style.display = "none"; } input.classList.remove("is-invalid", "is-valid"); } // Validate individual field function validateField(input) { const value = input.value.trim(); const fieldName = input.name || input.id.replace("ft-pp-", ""); // Check if field is required and empty if (input.hasAttribute("data-required") && !value) { showFieldError(input, "This field is required"); return false; } // Skip further validation if empty and not required if (!value) { clearFieldState(input); return true; } // Validate against regex rules if (validationRules[fieldName]) { if (!validationRules[fieldName].regex.test(value)) { showFieldError(input, validationRules[fieldName].message); return false; } } // Special validation for select fields if (input.tagName === "SELECT" && !value) { showFieldError(input, "Please select an option"); return false; } showFieldSuccess(input); return true; } // Check if all required fields are valid function checkFormValidity() { const allFields = [ studentName, parentName, phone, email, curriculum, grade, locality, ]; let allValid = true; allFields.forEach((field) => { const value = field.value.trim(); const fieldName = field.name || field.id.replace("ft-pp-", ""); // Check if required field is filled if (field.hasAttribute("data-required") && !value) { allValid = false; return; } // Check against validation rules if (validationRules[fieldName] && value) { if (!validationRules[fieldName].regex.test(value)) { allValid = false; return; } } }); // Enable/disable submit button submitBtn.disabled = !allValid; } // Add real-time validation on blur [ studentName, parentName, phone, email, curriculum, grade, locality, ].forEach((input) => { if (input) { input.addEventListener("blur", () => { validateField(input); checkFormValidity(); }); // Clear error on focus input.addEventListener("focus", () => { if (input.classList.contains("is-invalid")) { clearFieldState(input); } }); // Validate on input for text fields if (input.type !== "select-one") { input.addEventListener("input", () => { if (input.value.trim()) { validateField(input); } checkFormValidity(); }); } // For select fields, check validity on change if (input.tagName === "SELECT") { input.addEventListener("change", () => { validateField(input); checkFormValidity(); }); } } }); // Phone number: allow only digits phone.addEventListener("keypress", (e) => { if ( !/^\d$/.test(e.key) && !["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"].includes( e.key ) ) { e.preventDefault(); } }); // Name fields: allow only letters and spaces [studentName, parentName].forEach((input) => { input.addEventListener("keypress", (e) => { if ( !/^[A-Za-z\s\.]$/.test(e.key) && !["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"].includes( e.key ) ) { e.preventDefault(); } }); }); // Location auto-fill let locationFetched = false; locality.addEventListener("focus", () => { if (locationFetched || locality.value.trim() !== "") return; if (!navigator.geolocation) { showToast("Geolocation not supported by your browser.", "error"); return; } navigator.geolocation.getCurrentPosition( async (position) => { const { latitude, longitude } = position.coords; locationFetched = true; try { const res = await fetch( `https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${latitude}&lon=${longitude}` ); const data = await res.json(); if (data && data.address) { const locationName = data.address.suburb || data.address.village || data.address.city || data.address.town || data.display_name; locality.value = locationName; showToast("Location auto-filled.", "success"); validateField(locality); checkFormValidity(); } else { showToast("Could not determine location.", "error"); } } catch (err) { console.error(err); showToast("Error retrieving location info.", "error"); } }, () => { showToast( "Permission denied. Please enter location manually.", "error" ); } ); }); // Grade logic const cbseGrades = ["Nursery","LKG","UKG", "Grade 1", "Grade 2", "Grade 3", "Grade 4", "Grade 5", "Grade 6", "Grade 7"]; const cambridgeGrades = [ "EY-1 (Nur)", "EY-2 (PP1/LKG)", "EY-3 (PP2/UKG)", "Grade 1", "Grade 2", "Grade 3", ]; curriculum.addEventListener("change", () => { const selected = curriculum.value; let grades = []; if (selected === "CBSE") grades = cbseGrades; else if (selected === "CAMBRIDGE INTERNATIONAL") grades = cambridgeGrades; grade.innerHTML = `<option value="" selected disabled>Admission for (Grade) *</option>`; grades.forEach((gradeName) => { const opt = document.createElement("option"); opt.value = gradeName; opt.textContent = gradeName; grade.appendChild(opt); }); // Reset grade validation state since options changed clearFieldState(grade); validateField(curriculum); checkFormValidity(); }); form.addEventListener("submit", async (e) => { e.preventDefault(); // Validate all fields before submission const allFields = [ studentName, parentName, phone, email, curriculum, grade, locality, ]; let isFormValid = true; let firstInvalidField = null; // Validate each field allFields.forEach((field) => { if (!validateField(field)) { isFormValid = false; if (!firstInvalidField) { firstInvalidField = field; } } }); // If form is invalid, focus on first invalid field and show error if (!isFormValid) { if (firstInvalidField) { firstInvalidField.focus(); firstInvalidField.scrollIntoView({ behavior: "smooth", block: "center", }); } showToast("Please fill all required fields correctly.", "error"); return; } // Disable submit button to prevent double submission submitBtn.disabled = true; submitBtn.textContent = "Submitting..."; // Prepare data for n8n webhook const data = { studentName: studentName.value.trim(), parentName: parentName.value.trim(), phoneNumber: phone.value.trim(), email: email.value.trim(), curriculum: curriculum.value.trim(), grade: grade.value.trim(), locality: locality.value.trim(), schoolName: document.getElementById("schoolName").value, submittedAt: new Date().toISOString(), source: "pmsramannapet.com", formType: "popup-enquiry", }; try { const response = await fetch( "proxy.php?action=zap", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json", }, body: JSON.stringify(data), } ); if (response.ok || response.status === 200) { // Reset form form.reset(); grade.innerHTML = '<option value="" selected disabled>Admission for (Grade) *</option>'; // Clear all validation states allFields.forEach((field) => clearFieldState(field)); // Hide form and show success message document.getElementById("ft-pp-form-fields").style.display = "none"; document.getElementById("ft-pp-success-msg").style.display = "block"; showToast( "Form submitted successfully! We'll contact you soon.", "success" ); // Reset location fetched flag locationFetched = false; // Disable submit button after reset submitBtn.disabled = true; } else { const errorData = await response.text(); console.error("Server error:", errorData); showToast("Failed to submit form. Please try again.", "error"); } } catch (error) { console.error("Submission error:", error); showToast( "Network error. Please check your connection and try again.", "error" ); } finally { // Reset button state submitBtn.disabled = false; submitBtn.textContent = "Submit"; } }); }); </script> </div> </div> <script> window.ftPpAutoPopupEnabled = false; </script> <script src="assets/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="assets/js/main.js"></script> <script src="assets/js/gallery-backup.js"></script> <script src="assets/aos/aos.js"></script> <script> AOS.init({ duration: 1000, once: true }); </script> <!-- Swiper JS --> <script src="assets/vendor/swiper/swiper-bundle.min.js"></script> <!--Chatbot--> <!-- <script src="https://extraaedgeresources.blob.core.windows.net/documents/dps-pgos_1/Chatbot/js/chat.js"></script> --> </body> </html>
Transport
Transport