Multi-Step-Form_Task2/script.js

var form1= document.getElementById("form1");
var form2= document.getElementById("form2");
var form3= document.getElementById("form3");
var Next1= document.getElementById("Next1");
var Next2= document.getElementById("Next2");
var Back1= document.getElementById("Back1");
var Back2= document.getElementById("Back2");

var progress= document.getElementById("progress");
var clearFormBtn = document.getElementById('clearForm');
const form = document.getElementsByClassName("multi-step-form");

var formData = {
    personalDetails:{},
    professionalDetails:{},
}

//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() {
    form1.style.transform = "translateX(-450px)";  
    form2.style.transform = "translateX(0px)";  
    progress.style.width = "240px";
    savePersonalDetails();
};

Back1.onclick = function() {
    form1.style.transform = "translateX(0px)";  
    form2.style.transform = "translateX(450px)";  
    progress.style.width = "120px";
};

Next2.onclick = function() {
    form2.style.transform = "translateX(-450px)";  
    form3.style.transform = "translateX(0px)";  
    progress.style.width = "360px";
    savePersonalDetails();
    displayReviewSection();
};

Back2.onclick = function() {
    form2.style.transform = "translateX(0px)";  
    form3.style.transform = "translateX(450px)";  
    progress.style.width = "240px";
};