Update script.js
This commit is contained in:
parent
5da495e0e8
commit
68cf15aca6
281
script.js
281
script.js
|
|
@ -1,4 +1,4 @@
|
|||
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
var form1= document.getElementById("form1");
|
||||
var form2= document.getElementById("form2");
|
||||
var form3= document.getElementById("form3");
|
||||
|
|
@ -6,75 +6,152 @@ var Next1= document.getElementById("Next1");
|
|||
var Next2= document.getElementById("Next2");
|
||||
var Back1= document.getElementById("Back1");
|
||||
var Back2= document.getElementById("Back2");
|
||||
|
||||
var submitBtn = document.getElementById("Submit");
|
||||
var successMessage= document.getElementById("successMessage");
|
||||
var clearFormBtn = document.getElementById("clearForm");
|
||||
var jsonPreview = document.getElementById('jsonPreview');
|
||||
var progress= document.getElementById("progress");
|
||||
var clearFormBtn = document.getElementById('clearForm');
|
||||
const form = document.getElementsByClassName("multi-step-form");
|
||||
|
||||
var formData = {
|
||||
personalDetails:{},
|
||||
professionalDetails:{},
|
||||
};
|
||||
|
||||
//Validations
|
||||
function validateFullName(){
|
||||
var fullName = document.getElementById('fullName');
|
||||
var errorMsg = document.getElementById('fullName-error');
|
||||
if( fullName.value.trim() === ''){
|
||||
errorMsg.textContent = 'Full Name is required.';
|
||||
return false;
|
||||
}
|
||||
if(fullName.value.length < 3){
|
||||
errorMsg.textContent = "Full Name must be at least 3 characters long.";
|
||||
return false;
|
||||
}
|
||||
var regex = /^[A-Za-z\s]+$/;
|
||||
if(!regex.test(fullName.value)){
|
||||
errorMsg.textContent = "Full Name must contain letters only.";
|
||||
return false;
|
||||
}
|
||||
|
||||
errorMsg.textContent = '';
|
||||
return true;
|
||||
}
|
||||
|
||||
//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(){
|
||||
function validateEmail(){
|
||||
var email = document.getElementById('email');
|
||||
var errorMsg = document.getElementById('email-error');
|
||||
var regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
|
||||
if(email.value.trim()=== ''){
|
||||
errorMsg.textContent= 'Email is required.';
|
||||
return false;
|
||||
}else if(!regex.test(email.value)){
|
||||
errorMsg.textContent = 'Please enter valid email address';
|
||||
return false;
|
||||
}
|
||||
errorMsg.textContent ='';
|
||||
return true;
|
||||
|
||||
}
|
||||
|
||||
// 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>
|
||||
function validatePhone(){
|
||||
var phone = document.getElementById('phone');
|
||||
var errorMsg = document.getElementById('phone-error');
|
||||
var regex = /^\d{10}$/;
|
||||
if(phone.value.trim() === ''){
|
||||
errorMsg.textContent = 'Phone number is required.';
|
||||
return false;
|
||||
}else if(!regex.test(phone.value)){
|
||||
errorMsg.textContent = 'Please enter a valid 10-digit phone number.';
|
||||
return false;
|
||||
}
|
||||
errorMsg.textContent = '';
|
||||
return true;
|
||||
|
||||
// `
|
||||
// };
|
||||
}
|
||||
|
||||
function validateAge(){
|
||||
var age = document.getElementById('age');
|
||||
var errorMsg = document.getElementById('age-error');
|
||||
if(age.value.trim() === ''){
|
||||
errorMsg.textContent = 'Age is required.';
|
||||
return false;
|
||||
}else if( age.value < 18 || age.value > 100){
|
||||
errorMsg.textContent = 'Age must be between 18 and 100.';
|
||||
return false;
|
||||
}
|
||||
errorMsg.textContent = '';
|
||||
return true;
|
||||
}
|
||||
|
||||
function validateGender() {
|
||||
var gender = document.querySelector('input[name="gender"]:checked');
|
||||
var errorMsg = document.getElementById('gender-error');
|
||||
if (!gender) {
|
||||
errorMsg.textContent = 'Please select a gender.';
|
||||
return false;
|
||||
}
|
||||
errorMsg.textContent = '';
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
function validateEducation() {
|
||||
var education = document.getElementById('education');
|
||||
var errorMsg = document.getElementById('education-error');
|
||||
if (education.value === '') {
|
||||
errorMsg.textContent = 'Education is required.';
|
||||
return false;
|
||||
}
|
||||
errorMsg.textContent = '';
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
function validateSkills() {
|
||||
var errorMsg = document.getElementById('skills-error');
|
||||
var checkedSkills = document.querySelectorAll('input[name="skills"]:checked');
|
||||
if (checkedSkills.length === 0) {
|
||||
errorMsg.textContent = 'Please select at least one skill.';
|
||||
return false;
|
||||
}
|
||||
errorMsg.textContent = '';
|
||||
return true;
|
||||
}
|
||||
|
||||
function validateExperience() {
|
||||
var experience = document.getElementById('experience');
|
||||
var errorMsg = document.getElementById('experience-error');
|
||||
if (experience.value.trim() === '') {
|
||||
errorMsg.textContent = 'Experience is required.';
|
||||
return false;
|
||||
} else if (experience.value < 0 || experience.value > 50) {
|
||||
errorMsg.textContent = 'Experience must be between 0 and 50 years.';
|
||||
return false;
|
||||
}
|
||||
errorMsg.textContent = '';
|
||||
return true;
|
||||
}
|
||||
|
||||
function validateRole() {
|
||||
var role = document.getElementById('currentRole');
|
||||
var errorMsg = document.getElementById('currentRole-error');
|
||||
if (role.value.trim() === '') {
|
||||
errorMsg.textContent = 'Current role is required.';
|
||||
return false;
|
||||
}
|
||||
errorMsg.textContent = '';
|
||||
return true;
|
||||
}
|
||||
|
||||
Next1.onclick = function() {
|
||||
if(validateFullName() && validateEmail() && validatePhone() && validateAge() && validateGender()){
|
||||
form1.style.transform = "translateX(-450px)";
|
||||
form2.style.transform = "translateX(0px)";
|
||||
progress.style.width = "240px";
|
||||
savePersonalDetails();
|
||||
}
|
||||
};
|
||||
|
||||
Back1.onclick = function() {
|
||||
|
|
@ -84,11 +161,13 @@ Back1.onclick = function() {
|
|||
};
|
||||
|
||||
Next2.onclick = function() {
|
||||
if(validateEducation() && validateSkills() && validateExperience() && validateRole()){
|
||||
form2.style.transform = "translateX(-450px)";
|
||||
form3.style.transform = "translateX(0px)";
|
||||
progress.style.width = "360px";
|
||||
savePersonalDetails();
|
||||
displayReviewSection();
|
||||
saveProfessionalDetails();
|
||||
displayReviewSection();
|
||||
}
|
||||
};
|
||||
|
||||
Back2.onclick = function() {
|
||||
|
|
@ -97,6 +176,96 @@ Back2.onclick = function() {
|
|||
progress.style.width = "240px";
|
||||
};
|
||||
|
||||
//Saving data
|
||||
function savePersonalDetails(){
|
||||
formData.personalDetails.fullName = document.getElementById('fullName').value;
|
||||
formData.personalDetails.email = document.getElementById('email').value;
|
||||
formData.personalDetails.phone = document.getElementById('phone').value;
|
||||
formData.personalDetails.age = document.getElementById('age').value;
|
||||
formData.personalDetails.gender = document.querySelector('input[name="gender"]:checked').value;
|
||||
localStorage.setItem('personalDetails',JSON.stringify(formData.personalDetails));
|
||||
}
|
||||
|
||||
function saveProfessionalDetails() {
|
||||
formData.professionalDetails.education = document.getElementById('education').value;
|
||||
formData.professionalDetails.skills = [];
|
||||
document.querySelectorAll('input[name="skills"]:checked').forEach(function (checkbox) {
|
||||
formData.professionalDetails.skills.push(checkbox.value);
|
||||
});
|
||||
formData.professionalDetails.experience = document.getElementById('experience').value;
|
||||
formData.professionalDetails.currentRole = document.getElementById('currentRole').value;
|
||||
localStorage.setItem('professionalDetails', JSON.stringify(formData.professionalDetails));
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Display Review Section
|
||||
function displayReviewSection() {
|
||||
var personalDetails = JSON.parse(localStorage.getItem('personalDetails'));
|
||||
var professionalDetails = JSON.parse(localStorage.getItem('professionalDetails'));
|
||||
|
||||
console.log('Personal Details:', personalDetails);
|
||||
console.log('Professional Details:', professionalDetails);
|
||||
|
||||
var reviewSection = document.getElementById('reviewSection');
|
||||
reviewSection.innerHTML = `
|
||||
<div class = "review-section">
|
||||
<div class="detail-group">
|
||||
<h4>Personal Details</h4>
|
||||
<p><strong>Full Name:</strong> ${personalDetails.fullName}</p>
|
||||
<p><strong>Email:</strong> ${personalDetails.email}</p>
|
||||
<p><strong>Phone:</strong> ${personalDetails.phone}</p>
|
||||
<p><strong>Age:</strong> ${personalDetails.age}</p>
|
||||
<p><strong>Gender:</strong> ${personalDetails.gender}</p>
|
||||
|
||||
<h4>Professional Details</h4>
|
||||
<p><strong>Education:</strong> ${professionalDetails.education}</p>
|
||||
<p><strong>Skills:</strong> ${professionalDetails.skills.join(', ')}</p>
|
||||
<p><strong>Experience:</strong> ${professionalDetails.experience} years</p>
|
||||
<p><strong>Current Role:</strong> ${professionalDetails.currentRole}</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
jsonPreview.textContent = JSON.stringify({ personalDetails, professionalDetails }, null, 2);
|
||||
submitBtn.disabled = false;
|
||||
}
|
||||
|
||||
//Submit form success-message
|
||||
submitBtn.onclick = function (event){
|
||||
event.preventDefault();
|
||||
successMessage.style.display= 'block';
|
||||
setTimeout(function(){
|
||||
successMessage.style.display ='none';
|
||||
},3000);
|
||||
|
||||
setTimeout(function() {
|
||||
form1.reset();
|
||||
form2.reset();
|
||||
form3.reset();
|
||||
localStorage.clear();
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
|
||||
//Export JSOn function
|
||||
document.getElementById("exportData").onclick = function() {
|
||||
var jsonData = jsonPreview.textContent;
|
||||
|
||||
var blob = new Blob([jsonData], { type: "application/json" });
|
||||
var link = document.createElement("a");
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = "formData.json";
|
||||
link.click();
|
||||
};
|
||||
|
||||
//Clear Form
|
||||
clearFormBtn.onclick = function () {
|
||||
localStorage.removeItem('personalDetails');
|
||||
localStorage.removeItem('professionalDetails');
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue