veerjot_dml/assignment_multistep_form
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

task2

Browse source
This commit is contained in:
veerjot_dm 2024-12-26 17:18:35 +05:30
parent ebe168a45d
commit 1f4a648db2
3 changed files with 523 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

151
form.html Normal file
View file

@ -0,0 +1,151 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Step Form</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="formContainer">
<div class="step-indicator">
<span class="active" id="indicator-step1">1</span>
<span id="indicator-step2">2</span>
<span id="indicator-step3">3</span>
</div>
<form id="multistepForm">
<div class="step" id="step1">
<h1>Personal Details</h1>
<label for="Fullname">Full Name</label>
<input type="text" id="Fullname" name="Fullname" required pattern="[a-zA-Z ]{3,}" title="Enter at least 3 letters">
<span class="error" id="error-fullname"></span>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<span class="error" id="error-email"></span>
<label for="phone">Phone Number</label>
<input type="text" id="phone" name="phone" required pattern="\d{10}" title="Enter a 10-digit phone number">
<span class="error" id="error-phone"></span>
<label for="gender">Gender</label>
<div class="gender">
Male <input type="radio" id="Male" name="gender" value="Male" required>
Female <input type="radio" id="Female" name="gender" value="Female">
Other<input type="radio" id="Other" name="gender" value="Other">
</div>
<span class="error" id="error-gender"></span>
<label for="age">Age</label>
<input type="number" id="age" name="age" min="18" max="100" required>
<span class="error" id="error-age"></span>
<div class="form-navigation">
<button type="button" onclick="nextStep(2)">Next</button>
</div>
</div>
<div class="step hidden" id="step2">
<h1>Professional Details</h1>
<label for="education">Education</label>
<select id="education" name="education" required>
<option value="B.tech">B.tech</option>
<option value="M.tech">M.tech</option>
<option value="BCA">BCA</option>
<option value="MCA">MCA</option>
<option value="B.com">B.com</option>
<option value="M.com">M.com</option>
<option value="Other">Other</option>
</select>
<span class="error" id="error-education"></span>
<label for="skills">Skills</label>
<div class="skill">
<label>C <input type="checkbox" name="skills" value="C"></label>
<label>C++ <input type="checkbox" name="skills" value="C++"></label>
<label>Java <input type="checkbox" name="skills" value="Java"></label>
<label>Python <input type="checkbox" name="skills" value="Python"></label>
<label>Web Development <input type="checkbox" name="skills" value="Web Development"></label>
<label>App Development <input type="checkbox" name="skills" value="App Development"></label>
</div>
<span class="error" id="error-skills"></span>
<label for="experience">Experience (in years)</label>
<input type="number" id="experience" name="experience" min="0" max="50" required>
<span class="error" id="error-experience"></span>
<label for="currentrole">Current Role</label>
<input type="text" id="currentrole" name="currentrole" required>
<span class="error" id="error-currentrole"></span>
<div class="form-navigation">
<button type="button" onclick="nextStep(1)">Back</button>
<button type="button" onclick="nextStep(3)">Next</button>
</div>
</div>
<div class="step hidden" id="step3">
<h1>Review & Submit</h1>
<div id="review">
<table>
<tr>
<td><strong>Full Name:</strong></td>
<td><span id="reviewFullName"></span></td>
<td><button type="button" onclick="editStep('step1')">Edit</button></td>
</tr>
<tr>
<td><storng>Email: </storng></td>
<td><span id="reviewEmail"></span></td>
<td><button type="button" onclick="editStep('step1')">Edit</button></td>
</tr>
<tr>
<td><storng>Phone Number: </storng></td>
<td><span id="reviewPhone"></span></td>
<td><button type="button" onclick="editStep('step1')">Edit</button></td>
</tr>
<tr>
<td><storng>Gender: </storng></td>
<td><span id="reviewGender"></span></td>
<td><button type="button" onclick="editStep('step1')">Edit</button></td>
</tr>
<tr>
<td><storng>Age: </storng></td>
<td><span id="reviewAge"></span></td>
<td><button type="button" onclick="editStep('step1')">Edit</button></td>
</tr>
<tr>
<td><storng>Education: </storng></td>
<td><span id="reviewEducation"></span></td>
<td><button type="button" onclick="editStep('step2')">Edit</button></td>
</tr>
<tr>
<td><storng>Skills: </storng></td>
<td><span id="reviewSkills"></span></td>
<td><button type="button" onclick="editStep('step2')">Edit</button></td>
</tr>
<tr>
<td><storng>Experience: </storng></td>
<td><span id="reviewExperience"></span></td>
<td><button type="button" onclick="editStep('step2')">Edit</button></td>
</tr>
<tr>
<td><storng>Current Role: </storng></td>
<td><span id="reviewCurrentRole"></span></td>
<td><button type="button" onclick="editStep('step2')">Edit</button></td>
</tr>
</table>
</div>
<div class="form-navigation">
<button type="button" id="clearButton" onclick="clearform() ">Clear</button>
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>

217
script.js Normal file
View file

@ -0,0 +1,217 @@
let currentStep = 1;
function nextStep(step) {
if (!validateStep(currentStep)) {
return;
}
document.getElementById(`step${currentStep}`).classList.add('hidden');
document.getElementById(`indicator-step${currentStep}`).classList.remove('active');
currentStep = step;
document.getElementById(`step${currentStep}`).classList.remove('hidden');
document.getElementById(`indicator-step${currentStep}`).classList.add('active');
if(step === 3){
isValid = populateReview();
}
}
function validateStep(step) {
let isValid = true;
if (step === 1) {
isValid = validatePersonalDetails();
}
if (step === 2) {
isValid = validateProfessionalDetails();
}
return isValid;
}
function validatePersonalDetails() {
let isValid = true;
const fullname = document.getElementById("Fullname").value;
if (!fullname.match(/[a-zA-Z ]{3,}/)) {
document.getElementById("error-fullname").innerText = "Full name must be at least 3 letters";
isValid = false;
} else {
document.getElementById("error-fullname").innerText = "";
}
const email = document.getElementById("email").value;
if (!email.includes('@')) {
document.getElementById("error-email").innerText = "Please enter a valid email address";
isValid = false;
} else {
document.getElementById("error-email").innerText = "";
}
const phone = document.getElementById("phone").value;
if (!phone.match(/\d{10}/)) {
document.getElementById("error-phone").innerText = "Phone number must be 10 digits";
isValid = false;
} else {
document.getElementById("error-phone").innerText = "";
}
const gender = document.querySelector('input[name="gender"]:checked');
if (!gender) {
document.getElementById("error-gender").innerText = "Please select your gender";
isValid = false;
} else {
document.getElementById("error-gender").innerText = "";
}
const age = document.getElementById("age").value;
if (age < 18 || age > 100) {
document.getElementById("error-age").innerText = "Age must be between 18 and 100";
isValid = false;
} else {
document.getElementById("error-age").innerText = "";
}
return isValid;
}
function validateProfessionalDetails() {
let isValid = true;
const education = document.getElementById("education").value;
if (!education) {
document.getElementById("error-education").innerText = "Please select your education";
isValid = false;
} else {
document.getElementById("error-education").innerText = "";
}
const skills = document.querySelectorAll('input[name="skills"]:checked');
if (skills.length === 0) {
document.getElementById("error-skills").innerText = "Please select at least one skill";
isValid = false;
} else {
document.getElementById("error-skills").innerText = "";
}
const experience = document.getElementById("experience").value;
if (experience < 0 || experience > 50) {
document.getElementById("error-experience").innerText = "Experience must be between 0 and 50 years";
isValid = false;
} else {
document.getElementById("error-experience").innerText = "";
}
const currentRole = document.getElementById("currentrole").value;
if (!currentRole) {
document.getElementById("error-currentrole").innerText = "Please enter your current role";
isValid = false;
} else {
document.getElementById("error-currentrole").innerText = "";
}
return isValid;
}
document.getElementById('multistepForm').addEventListener('submit',
function (event) {
event.preventDefault();
const formData = new FormData(this);
const data = Object.fromEntries(formData.entries());
const skills = formData.getAll('skills');
data.skills = skills;
localStorage.setItem('formData', JSON.stringify(data));
const jsonData = JSON.stringify(data, null, 2);
const blob = new Blob([jsonData], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'formData.json';
link.click();
alert('Form submitted successfully!');
});
function loadFormData() {
const savedData = JSON.parse(localStorage.getItem('formData'));
if (savedData) {
document.getElementById('Fullname').value = savedData.Fullname || '';
document.getElementById('email').value = savedData.email || '';
document.getElementById('phone').value = savedData.phone || '';
document.getElementById('age').value = savedData.age || '';
document.getElementById('education').value = savedData.education || '';
document.getElementById('experience').value = savedData.experience || '';
document.getElementById('currentrole').value = savedData.currentrole || '';
savedData.skills.forEach(skill => {
document.querySelector(`input[name="skills"][value="${skill}"]`).checked = true;
});
}
}
function editStep(step){
document.getElementById(`step${currentStep}`).classList.add('hidden');
document.getElementById(`indicator-step${currentStep}`).classList.remove('active');
currentStep = parseInt(step.replace('step',''));
document.getElementById(`step${currentStep}`).classList.remove('hidden');
document.getElementById(`indicator-step${currentStep}`).classList.add('active');
}
function populateReview() {
const form = document.getElementById('multistepForm');
document.getElementById('reviewFullName').innerText = form.querySelector('#Fullname').value;
document.getElementById('reviewEmail').innerText = form.querySelector('#email').value;
document.getElementById('reviewPhone').innerText = form.querySelector('#phone').value;
document.getElementById('reviewGender').innerText = form.querySelector('input[name="gender"]:checked')?.value || 'Not specified';
document.getElementById('reviewAge').innerText = form.querySelector('#age').value;
document.getElementById('reviewEducation').innerText = form.querySelector('#education').value;
document.getElementById('reviewExperience').innerText = form.querySelector('#experience').value;
const skills = Array.from(form.querySelectorAll('input[name="skills"]:checked')).map(skill => skill.value);
document.getElementById('reviewSkills').innerText = skills.length > 0 ? skills.join(', ') : 'None selected';
document.getElementById('reviewCurrentRole').innerText = form.querySelector('#currentrole').value;
}
function clearform() {
const form = document.getElementById('multistepForm');
form.reset();
document.getElementById('reviewFullName').innerText = "";
document.getElementById('reviewEmail').innerText = "";
document.getElementById('reviewPhone').innerText = "";
document.getElementById('reviewGender').innerText = "";
document.getElementById('reviewAge').innerText = "";
document.getElementById('reviewEducation').innerText = "";
document.getElementById('reviewExperience').innerText = "";
document.getElementById('reviewSkills').innerText = "";
document.getElementById('reviewCurrentRole').innerText = "";
document.getElementById('review').classList.add('hidden');
currentStep = 1;
document.getElementById('step1').classList.remove('hidden');
document.getElementById('indicator-step1').classList.add('active');
for (let i = 2; i <= 3; i++) {
document.getElementById(`step${i}`).classList.add('hidden');
document.getElementById(`indicator-step${i}`).classList.remove('active');
}
}
window.onload = loadFormData;

155
style.css Normal file
View file

@ -0,0 +1,155 @@
body {
background-image: url('https://images.pexels.com/photos/4951280/pexels-photo-4951280.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-repeat: no-repeat;
background-size: cover;
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.formContainer {
background: #006F90;
padding: 20px;
border-radius: 9px;
width: 100%;
max-width: 450px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 20px;
color: white;
}
label {
display: block;
margin-top: 10px;
color: white;
}
input, select {
width: 100%;
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
}
input[type="radio"], input[type="checkbox"] {
width: auto;
margin-right: 5px;
}
input:invalid {
border-color: red;
}
.error {
color: red;
font-size: 12px;
margin-top: 5px;
}
.gender {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
.skill {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 10px;
}
.skill label{
display: flex;
align-items: center;
gap: 5px;
}
.skill input[type="checkbox"] {
width: auto;
}
.form-navigation {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
button {
background: #0E3949;
color: white;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
border: none;
}
button:hover {
background-color: #17A1B4;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.step-indicator {
text-align: center;
margin-bottom: 20px;
}
.step-indicator span {
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
border-radius: 50%;
background: white;
line-height: 20px;
color: black;
}
.step-indicator .active {
background: #21B2DC;
}
.hidden {
display: none;
}
button[type="button"]:disabled {
background-color: #ccc;
}
#review {
margin-top: 20px;
background: #fff;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
@media (max-width: 500px) {
.formContainer {
width: 100%;
padding: 15px;
}
h1 {
font-size: 20px;
}
.step-indicator span {
width: 15px;
height: 15px;
line-height: 15px;
}
}