122 lines
4.5 KiB
JavaScript
122 lines
4.5 KiB
JavaScript
function toggleMenu() {
|
|
const navLinks = document.querySelector('.nav-links');
|
|
navLinks.classList.toggle('active');
|
|
}
|
|
|
|
|
|
|
|
let currentStep = 0;
|
|
|
|
function showStep(step) {
|
|
const steps = document.querySelectorAll('.step');
|
|
const indicators = document.querySelectorAll('.step-indicator div');
|
|
steps.forEach(s => s.classList.remove('active'));
|
|
indicators.forEach(i => i.classList.remove('active'));
|
|
steps[step].classList.add('active');
|
|
indicators[step].classList.add('active');
|
|
}
|
|
|
|
function nextStep() {
|
|
if (validateStep(currentStep)) {
|
|
currentStep++;
|
|
if (currentStep >= document.querySelectorAll('.step').length) {
|
|
currentStep = document.querySelectorAll('.step').length - 1;
|
|
}
|
|
showStep(currentStep);
|
|
if (currentStep === 2) {
|
|
reviewData();
|
|
}
|
|
}
|
|
}
|
|
|
|
function prevStep() {
|
|
currentStep--;
|
|
if (currentStep < 0) {
|
|
currentStep = 0;
|
|
}
|
|
showStep(currentStep);
|
|
}
|
|
|
|
function validateStep(step) {
|
|
const inputs = document.querySelectorAll(`#step${step + 1} input, #step${step + 1} select`);
|
|
for (let input of inputs) {
|
|
if (!input.checkValidity()) {
|
|
input.reportValidity();
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function reviewData() {
|
|
const fullName = document.getElementById('fullName').value;
|
|
const email = document.getElementById('email').value;
|
|
const phone = document.getElementById('phone').value;
|
|
const gender = document.querySelector('input[name="gender"]:checked').value;
|
|
const age = document.getElementById('age').value;
|
|
const education = document.getElementById('education').value;
|
|
const experience = document.getElementById('experience').value;
|
|
const currentRole = document.getElementById('currentRole').value;
|
|
|
|
const skills = Array.from(document.querySelectorAll('input[name="skills"]:checked')).map(el => el.value).join(', ');
|
|
|
|
document.getElementById('review').innerHTML = `
|
|
<p><strong>Full Name:</strong> ${fullName}</p>
|
|
<p><strong>Email:</strong> ${email}</p>
|
|
<p><strong>Phone:</strong> ${phone}</p>
|
|
<p><strong>Gender:</strong> ${gender}</p>
|
|
<p><strong>Age:</strong> ${age}</p>
|
|
<p><strong>Education:</strong> ${education}</p>
|
|
<p><strong>Skills:</strong> ${skills}</p>
|
|
<p><strong>Experience:</strong> ${experience} years</p>
|
|
<p><strong>Current Role:</strong> ${currentRole}</p>
|
|
`;
|
|
}
|
|
|
|
function submitForm() {
|
|
const data = {
|
|
fullName: document.getElementById('fullName').value,
|
|
email: document.getElementById('email').value,
|
|
phone: document.getElementById('phone').value,
|
|
gender: document.querySelector('input[name="gender"]:checked').value,
|
|
age: document.getElementById('age').value,
|
|
education: document.getElementById('education').value,
|
|
skills: Array.from(document.querySelectorAll('input[name="skills"]:checked')).map(el => el.value),
|
|
experience: document.getElementById('experience').value,
|
|
currentRole: document.getElementById('currentRole').value
|
|
};
|
|
|
|
localStorage.setItem('formData', JSON.stringify(data));
|
|
document.getElementById('multiStepForm').style.display = 'none';
|
|
document.getElementById('successMessage').style.display = 'block';
|
|
}
|
|
|
|
function exportData() {
|
|
const data = localStorage.getItem('formData');
|
|
const blob = new Blob([data], { type: 'application/json' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'formData.json';
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
}
|
|
|
|
function clearForm() {
|
|
document.getElementById('multiStepForm').reset();
|
|
localStorage.removeItem('formData');
|
|
currentStep = 0;
|
|
showStep(currentStep);
|
|
document.getElementById('successMessage').style.display = 'none';
|
|
}
|
|
|
|
// Initialize the form
|
|
showStep(currentStep);
|
|
|
|
|
|
|
|
|
|
|
|
|