jaanvi/Multi-Step-Form_Task2
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Update script.js

Browse source
This commit is contained in:
jaanvi 2024-12-26 12:57:39 +00:00
parent de07f2517b
commit b0ae71e5fc
1 changed files with 78 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
script.js
View file

@ -1,3 +1,4 @@
var form1= document.getElementById("form1"); var form1= document.getElementById("form1");
var form2= document.getElementById("form2"); var form2= document.getElementById("form2");
var form3= document.getElementById("form3"); var form3= document.getElementById("form3");
@ -8,34 +9,94 @@ var Back2= document.getElementById("Back2");
var progress= document.getElementById("progress"); var progress= document.getElementById("progress");
var clearFormBtn = document.getElementById('clearForm'); var clearFormBtn = document.getElementById('clearForm');
const form = document.getElementsByClassName("multi-step-form");
var formData = { var formData = {
personalDetails:{}, personalDetails:{},
professionalDetails:{}, professionalDetails:{},
} }
//Display Review Section
//For Validation
// const fields= {
// fullName: document.getElementById("fullName"),
// email: document.getElementById("email"),
// phone: document.getElementById("phone"),
// age: document.getElementById('age'),
// gender: form.querySelector('[name="gender"]'),
// education: document.getElementById("education"),
// skills: form.querySelectorAll("[name='skills']"),
// experience: document.getElementById("experience"),
// currentRole: document.getElementById("currentRole")
// };
// const reviewSection = document.getElementById('reviewSection');
// //save Personal Details
// const saveToLocalStorage =()=>{
// const formData = getFormData();
// localStorage.setItem("formData",JSON.stringify(formData));
// };
// const getFormData= () =>{
// const formData ={
// personal:{
// fullName: fields.fullName.value,
// email: fields.email.value,
// phone: fields.phone.value,
// age: fields.age.value,
// gender: fields.gender.value
// },
// professional:{
// education: fields.education.value,
// skills: Array.from(fields.skills).filter(skills => skills.checked).map(skills => skills.value),
// experience: fields.experience.value,
// currentRole: fields.currentRole.value
// }
// }
// };
// //Display Review Section
// function displayReviewSection(){
// reviewSection.innerHTML = `
// <h4>Personal Details</h4>
// <p><strong>Full Name: </strong>${personalDetails.fullName}</p>
// <p><strong>Email: </strong> ${personalDetails.email}</p>
// <p><strong>Mobile No.: </strong> ${personalDetails.phone}</p>
// <p><strong>Age: </strong> ${personalDetails.age}</p>
// <p><strong>Gender: </strong> ${personalDetails.gender}</p>
// `
// };
Next1.onclick = function() { Next1.onclick = function() {
form1.style.left = "-450px"; form1.style.transform = "translateX(-450px)";
form2.style.left = "40px"; form2.style.transform = "translateX(0px)";
progress.style.width = "240px"; progress.style.width = "240px";
} savePersonalDetails();
};
Back1.onclick = function() { Back1.onclick = function() {
form1.style.left = "40px"; form1.style.transform = "translateX(0px)";
form2.style.left = "450px"; form2.style.transform = "translateX(450px)";
progress.style.width = "120px"; progress.style.width = "120px";
} };
Next2.onclick = function() { Next2.onclick = function() {
form2.style.left = "-450px"; form2.style.transform = "translateX(-450px)";
form3.style.left = "40px"; form3.style.transform = "translateX(0px)";
progress.style.width = "360px"; progress.style.width = "360px";
} savePersonalDetails();
displayReviewSection();
};
Back2.onclick = function() { Back2.onclick = function() {
form2.style.left = "40px"; form2.style.transform = "translateX(0px)";
form3.style.left = "450px"; form3.style.transform = "translateX(450px)";
progress.style.width = "240px"; progress.style.width = "240px";
} };