116 lines
3.8 KiB
JavaScript
116 lines
3.8 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const surveyForm = document.getElementById('survey-form');
|
|
if (!surveyForm) return;
|
|
|
|
const steps = Array.from(surveyForm.querySelectorAll('.step'));
|
|
const nextBtn = document.getElementById('nextBtn');
|
|
const prevBtn = document.getElementById('prevBtn');
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
const progressBar = surveyForm.querySelector('.progress-bar');
|
|
let currentStep = 0;
|
|
|
|
function showStep(stepIndex) {
|
|
steps.forEach((step, index) => {
|
|
step.classList.toggle('active', index === stepIndex);
|
|
});
|
|
updateProgressBar();
|
|
updateButtons();
|
|
}
|
|
|
|
function updateProgressBar() {
|
|
const progress = ((currentStep + 1) / steps.length) * 100;
|
|
progressBar.style.width = progress + '%';
|
|
progressBar.setAttribute('aria-valuenow', progress);
|
|
}
|
|
|
|
function updateButtons() {
|
|
prevBtn.style.display = currentStep === 0 ? 'none' : 'inline-block';
|
|
nextBtn.style.display = currentStep === steps.length - 1 ? 'none' : 'inline-block';
|
|
submitBtn.style.display = currentStep === steps.length - 1 ? 'inline-block' : 'none';
|
|
}
|
|
|
|
function validateStep(stepIndex) {
|
|
const currentStepElement = steps[stepIndex];
|
|
const inputs = Array.from(currentStepElement.querySelectorAll('input, textarea'));
|
|
let isValid = true;
|
|
|
|
inputs.forEach(input => {
|
|
if (input.hasAttribute('required')) {
|
|
if (input.type === 'radio' || input.type === 'checkbox') {
|
|
const name = input.name;
|
|
if (!surveyForm.querySelector(`input[name="${name}"]:checked`)) {
|
|
isValid = false;
|
|
}
|
|
} else if (!input.value.trim()) {
|
|
isValid = false;
|
|
}
|
|
}
|
|
});
|
|
|
|
return isValid;
|
|
}
|
|
|
|
nextBtn.addEventListener('click', () => {
|
|
if (!validateStep(currentStep)) {
|
|
alert('Please answer the question before proceeding.');
|
|
return;
|
|
}
|
|
|
|
if (currentStep < steps.length - 1) {
|
|
currentStep++;
|
|
showStep(currentStep);
|
|
}
|
|
});
|
|
|
|
prevBtn.addEventListener('click', () => {
|
|
if (currentStep > 0) {
|
|
currentStep--;
|
|
showStep(currentStep);
|
|
}
|
|
});
|
|
|
|
showStep(currentStep);
|
|
|
|
const successMessage = document.getElementById('success-message');
|
|
const formContainer = document.querySelector('.form-container');
|
|
|
|
surveyForm.addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(this);
|
|
const emailInput = document.getElementById('email');
|
|
if (emailInput) {
|
|
formData.append('email', emailInput.value);
|
|
}
|
|
|
|
fetch('submit_feedback.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
if (formContainer) {
|
|
formContainer.classList.add('hidden');
|
|
}
|
|
if (successMessage) {
|
|
successMessage.classList.remove('hidden');
|
|
}
|
|
} else {
|
|
alert('An error occurred: ' + (data.error || 'Unknown error'));
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('A server error occurred. Please try again later.');
|
|
});
|
|
});
|
|
|
|
function validateEmail(email) {
|
|
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
|
return re.test(String(email).toLowerCase());
|
|
}
|
|
});
|
|
|
|
|