Compare commits
No commits in common. "1476a05b41a623b958447f68a219b371c9ddeca0" and "ab3877b84622540ac06a55c36eaa3fe4af6c9614" have entirely different histories.
1476a05b41
...
ab3877b846
101
index.html
101
index.html
|
|
@ -1,101 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Form Navigation</title>
|
|
||||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Personal Details form -->
|
|
||||||
|
|
||||||
<form id="personalDetailsForm">
|
|
||||||
<h2>Personal Details Form</h2>
|
|
||||||
<label for="fullName">Full Name:</label>
|
|
||||||
<input type="text" id="fullName" name="fullName" required />
|
|
||||||
<small class="error-message" id="nameError"></small>
|
|
||||||
|
|
||||||
<label for="email">Email:</label>
|
|
||||||
<input type="email" id="email" name="email" required />
|
|
||||||
<small class="error-message" id="emailError"></small>
|
|
||||||
|
|
||||||
<label for="phone">Phone:</label>
|
|
||||||
<input type="number" id="phone" name="phone" required />
|
|
||||||
<small class="error-message" id="phoneError"></small>
|
|
||||||
|
|
||||||
<label>Gender:</label>
|
|
||||||
<div class="radio-group">
|
|
||||||
<input type="radio" id="male" name="gender" value="male" required /> Male
|
|
||||||
<input type="radio" id="female" name="gender" value="female" /> Female
|
|
||||||
<input type="radio" id="other" name="gender" value="other" /> Other
|
|
||||||
</div>
|
|
||||||
<small class="error-message" id="genderError"></small>
|
|
||||||
|
|
||||||
<label for="age">Age:</label>
|
|
||||||
<input type="number" id="age" name="age" required />
|
|
||||||
<small class="error-message" id="ageError"></small>
|
|
||||||
<div class="container">
|
|
||||||
<button type="submit">Next</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Professional Details -->
|
|
||||||
|
|
||||||
<form id="professionalDetailsForm" style="display: none">
|
|
||||||
<h2>Professional Details Form</h2>
|
|
||||||
<label for="education">Education:</label>
|
|
||||||
<select id="education" name="education" required>
|
|
||||||
<option value="" disabled selected>Select your education</option>
|
|
||||||
<option value="high_school">High School</option>
|
|
||||||
<option value="bachelors">Bachelor's</option>
|
|
||||||
<option value="masters">Master's</option>
|
|
||||||
<option value="phd">Ph.D</option>
|
|
||||||
</select>
|
|
||||||
<small class="error-message" id="educationError"></small>
|
|
||||||
|
|
||||||
<label>Skills:</label>
|
|
||||||
<div class="checkbox-group">
|
|
||||||
<input type="checkbox" id="skill1" name="skills" value="html" /> HTML<br />
|
|
||||||
<input type="checkbox" id="skill2" name="skills" value="css" /> CSS<br />
|
|
||||||
<input type="checkbox" id="skill3" name="skills" value="javascript" /> JavaScript<br />
|
|
||||||
<input type="checkbox" id="skill4" name="skills" value="react" /> React<br />
|
|
||||||
<input type="checkbox" id="skill5" name="skills" value="nodejs" /> Node.js
|
|
||||||
</div>
|
|
||||||
<small class="error-message" id="skillsError"></small>
|
|
||||||
|
|
||||||
<label for="experience">Experience (in years):</label>
|
|
||||||
<input type="number" id="experience" name="experience" min="0" max="50" required />
|
|
||||||
<small class="error-message" id="experienceError"></small>
|
|
||||||
|
|
||||||
<label for="currentRole">Current Role:</label>
|
|
||||||
<input type="text" id="currentRole" name="currentRole" required />
|
|
||||||
<small class="error-message" id="roleError"></small>
|
|
||||||
<div class="container">
|
|
||||||
<button type="button" id="prevButton">Prev</button>
|
|
||||||
<button type="submit">Next</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Summary Section -->
|
|
||||||
<div id="summary" style="display: none;">
|
|
||||||
<h3>Summary Section</h3>
|
|
||||||
<div id="personalSummary"></div>
|
|
||||||
<button id="editPersonalDetails">Edit Personal Details</button>
|
|
||||||
|
|
||||||
<div id="professionalSummary"></div>
|
|
||||||
<button id="editProfessionalDetails">Edit Professional Details</button>
|
|
||||||
|
|
||||||
<button id="finalSubmit">Submit</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Success Message -->
|
|
||||||
<div id="successMessage" style="display: none">
|
|
||||||
<h2>Form Submitted Successfully!</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="scripts.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
212
scripts.js
212
scripts.js
|
|
@ -1,212 +0,0 @@
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
const personalDetailsForm = document.getElementById('personalDetailsForm');
|
|
||||||
const professionalDetailsForm = document.getElementById('professionalDetailsForm');
|
|
||||||
const summarySection = document.getElementById('summary');
|
|
||||||
const finalSubmitButton = document.getElementById('finalSubmit');
|
|
||||||
const personalSummary = document.getElementById('personalSummary');
|
|
||||||
const professionalSummary = document.getElementById('professionalSummary');
|
|
||||||
const successMessage = document.getElementById('successMessage');
|
|
||||||
const formData = {}; // Store form data
|
|
||||||
|
|
||||||
// Real-time validation for personal details
|
|
||||||
document.getElementById('fullName').addEventListener('input', () => {
|
|
||||||
const fullName = document.getElementById('fullName').value.trim();
|
|
||||||
const error = document.getElementById('nameError');
|
|
||||||
if (!/^[a-zA-Z\s]{3,}$/.test(fullName)) {
|
|
||||||
error.textContent = 'Full Name must be at least 3 characters and contain no numbers.';
|
|
||||||
} else {
|
|
||||||
error.textContent = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('email').addEventListener('input', () => {
|
|
||||||
const email = document.getElementById('email').value.trim();
|
|
||||||
const error = document.getElementById('emailError');
|
|
||||||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
|
||||||
error.textContent = 'Please enter a valid email address.';
|
|
||||||
} else {
|
|
||||||
error.textContent = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('phone').addEventListener('input', () => {
|
|
||||||
const phone = document.getElementById('phone').value.trim();
|
|
||||||
const error = document.getElementById('phoneError');
|
|
||||||
if (!/^\d{10}$/.test(phone)) {
|
|
||||||
error.textContent = 'Phone number must be exactly 10 digits.';
|
|
||||||
} else {
|
|
||||||
error.textContent = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelectorAll('input[name="gender"]').forEach((input) => {
|
|
||||||
input.addEventListener('change', () => {
|
|
||||||
const gender = document.querySelector('input[name="gender"]:checked');
|
|
||||||
const error = document.getElementById('genderError');
|
|
||||||
if (!gender) {
|
|
||||||
error.textContent = 'Please select a gender.';
|
|
||||||
} else {
|
|
||||||
error.textContent = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('age').addEventListener('input', () => {
|
|
||||||
const age = document.getElementById('age').value.trim();
|
|
||||||
const error = document.getElementById('ageError');
|
|
||||||
if (age < 18 || age > 100 || !age) {
|
|
||||||
error.textContent = 'Age must be between 18 and 100.';
|
|
||||||
} else {
|
|
||||||
error.textContent = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Real-time validation for professional details
|
|
||||||
document.getElementById('education').addEventListener('change', () => {
|
|
||||||
const education = document.getElementById('education').value;
|
|
||||||
const error = document.getElementById('educationError');
|
|
||||||
if (!education) {
|
|
||||||
error.textContent = 'Please select your education.';
|
|
||||||
} else {
|
|
||||||
error.textContent = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelectorAll('input[name="skills"]').forEach((input) => {
|
|
||||||
input.addEventListener('change', () => {
|
|
||||||
const skills = Array.from(document.querySelectorAll('input[name="skills"]:checked')).map(skill => skill.value);
|
|
||||||
const error = document.getElementById('skillsError');
|
|
||||||
if (skills.length === 0) {
|
|
||||||
error.textContent = 'Please select at least one skill.';
|
|
||||||
} else {
|
|
||||||
error.textContent = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('experience').addEventListener('input', () => {
|
|
||||||
const experience = document.getElementById('experience').value.trim();
|
|
||||||
const error = document.getElementById('experienceError');
|
|
||||||
if (experience < 0 || experience > 50 || !experience) {
|
|
||||||
error.textContent = 'Experience must be between 0 and 50 years.';
|
|
||||||
} else {
|
|
||||||
error.textContent = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('currentRole').addEventListener('input', () => {
|
|
||||||
const currentRole = document.getElementById('currentRole').value.trim();
|
|
||||||
const error = document.getElementById('roleError');
|
|
||||||
if (!currentRole) {
|
|
||||||
error.textContent = 'Please enter your current role.';
|
|
||||||
} else {
|
|
||||||
error.textContent = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Handle "Previous" button click to switch between forms
|
|
||||||
document.getElementById('prevButton').addEventListener('click', () => {
|
|
||||||
professionalDetailsForm.style.display = 'none';
|
|
||||||
personalDetailsForm.style.display = 'block';
|
|
||||||
});
|
|
||||||
|
|
||||||
// Form submission handler
|
|
||||||
document.querySelectorAll('form').forEach((form) => {
|
|
||||||
form.addEventListener('submit', (event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
// Clear previous error messages
|
|
||||||
document.querySelectorAll('.error-message').forEach((error) => {
|
|
||||||
error.textContent = '';
|
|
||||||
});
|
|
||||||
|
|
||||||
let isValid = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (form.id === 'personalDetailsForm') {
|
|
||||||
// Validate personal details on submission
|
|
||||||
const fullName = document.getElementById('fullName').value.trim();
|
|
||||||
const email = document.getElementById('email').value.trim();
|
|
||||||
const phone = document.getElementById('phone').value.trim();
|
|
||||||
const gender = document.querySelector('input[name="gender"]:checked');
|
|
||||||
const age = document.getElementById('age').value.trim();
|
|
||||||
|
|
||||||
if (!/^[a-zA-Z\s]{3,}$/.test(fullName)) isValid = false;
|
|
||||||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) isValid = false;
|
|
||||||
if (!/^\d{10}$/.test(phone)) isValid = false;
|
|
||||||
if (!gender) isValid = false;
|
|
||||||
if (age < 18 || age > 100 || !age) isValid = false;
|
|
||||||
|
|
||||||
if (isValid) {
|
|
||||||
formData.personalDetails = { fullName, email, phone, gender: gender.value, age };
|
|
||||||
personalDetailsForm.style.display = 'none';
|
|
||||||
professionalDetailsForm.style.display = 'block';
|
|
||||||
}
|
|
||||||
} else if (form.id === 'professionalDetailsForm') {
|
|
||||||
// Validate professional details on submission
|
|
||||||
const education = document.getElementById('education').value;
|
|
||||||
const skills = Array.from(document.querySelectorAll('input[name="skills"]:checked')).map(skill => skill.value);
|
|
||||||
const experience = document.getElementById('experience').value.trim();
|
|
||||||
const currentRole = document.getElementById('currentRole').value.trim();
|
|
||||||
|
|
||||||
if (!education) isValid = false;
|
|
||||||
if (skills.length === 0) isValid = false;
|
|
||||||
if (experience < 0 || experience > 50 || !experience) isValid = false;
|
|
||||||
if (!currentRole) isValid = false;
|
|
||||||
|
|
||||||
if (isValid) {
|
|
||||||
formData.professionalDetails = { education, skills, experience, currentRole };
|
|
||||||
localStorage.setItem('formData', JSON.stringify(formData));
|
|
||||||
|
|
||||||
// Populate the summary section with the form data
|
|
||||||
personalSummary.innerHTML = `
|
|
||||||
<h3>Personal Details</h3>
|
|
||||||
<pre>${JSON.stringify(formData.personalDetails, null, 2)}</pre>
|
|
||||||
`;
|
|
||||||
professionalSummary.innerHTML = `
|
|
||||||
<h3>Professional Details</h3>
|
|
||||||
<pre>${JSON.stringify(formData.professionalDetails, null, 2)}</pre>
|
|
||||||
`;
|
|
||||||
professionalDetailsForm.style.display = 'none';
|
|
||||||
summarySection.style.display = 'block';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error processing the form:', error);
|
|
||||||
alert('An unexpected error occurred. Please try again.');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Handle final submit (download the form data as a JSON file)
|
|
||||||
finalSubmitButton.addEventListener('click', () => {
|
|
||||||
try {
|
|
||||||
const jsonData = JSON.stringify(formData, null, 2);
|
|
||||||
const blob = new Blob([jsonData], { type: 'application/json' });
|
|
||||||
const link = document.createElement('a');
|
|
||||||
link.href = URL.createObjectURL(blob);
|
|
||||||
link.download = 'formData.json';
|
|
||||||
link.click();
|
|
||||||
|
|
||||||
summarySection.style.display = 'none';
|
|
||||||
successMessage.style.display = 'block';
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error during final submission:', error);
|
|
||||||
alert('An error occurred while submitting the form. Please try again.');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Handle "Edit Personal Details" button click
|
|
||||||
document.getElementById('editPersonalDetails').addEventListener('click', () => {
|
|
||||||
summarySection.style.display = 'none';
|
|
||||||
personalDetailsForm.style.display = 'block';
|
|
||||||
});
|
|
||||||
|
|
||||||
// Handle "Edit Professional Details" button click
|
|
||||||
document.getElementById('editProfessionalDetails').addEventListener('click', () => {
|
|
||||||
summarySection.style.display = 'none';
|
|
||||||
professionalDetailsForm.style.display = 'block';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
110
styles.css
110
styles.css
|
|
@ -1,110 +0,0 @@
|
||||||
/* Global Styles */
|
|
||||||
body {
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
background-color: #f4f4f9;
|
|
||||||
color: #333;
|
|
||||||
margin: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Form Container */
|
|
||||||
form {
|
|
||||||
max-width: 600px; /* Increased width for a larger form */
|
|
||||||
margin: 20px auto;
|
|
||||||
padding: 30px; /* Increased padding for more space */
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'Arial', sans-serif;
|
|
||||||
color: #4CAF50;
|
|
||||||
margin-bottom: 20px; /* Added margin for spacing between title and form */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Form Group */
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
font-weight: 600;
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="text"],
|
|
||||||
input[type="email"],
|
|
||||||
input[type="number"],
|
|
||||||
select {
|
|
||||||
width: 100%;
|
|
||||||
padding: 12px;
|
|
||||||
border-radius: 5px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: 16px;
|
|
||||||
margin-bottom: 15px; /* Added bottom margin for spacing between inputs */
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="radio"] {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Error Message */
|
|
||||||
.error-message {
|
|
||||||
color: red;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Button Styling */
|
|
||||||
button {
|
|
||||||
background-color: #4CAF50;
|
|
||||||
color: white;
|
|
||||||
padding: 12px 25px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.3s ease;
|
|
||||||
margin-top: 10px; /* Added margin for space between button and inputs */
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
background-color: #45a049;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio-group input[type="radio"] {
|
|
||||||
margin-right: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Summary Section */
|
|
||||||
#summary {
|
|
||||||
padding: 25px;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
||||||
width: 70%; /* Increased width for a larger summary */
|
|
||||||
margin: 20px auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#summary h3 {
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
#summary button {
|
|
||||||
background-color: #4CAF50;
|
|
||||||
color: white;
|
|
||||||
padding: 12px 25px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#summary button:hover {
|
|
||||||
background-color: #45a049;
|
|
||||||
}
|
|
||||||
|
|
||||||
Loading…
Reference in a new issue