mihir_dml/Multi-step_Form
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'Dev/form' (#1) from Dev/form into main

Browse source 
Reviewed-on: #1
Reviewed-by: Sumit Kumar <sumit.kumar@digimantra.com>
This commit is contained in:
Sumit Kumar 2024-12-30 12:19:59 +00:00
parent 62f4961e57 b5793eb546
commit feec9f600f
3 changed files with 342 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
index.html Normal file
View file

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="form-container">
<div class="step" id="step1">
<form id="personal-details">
<h2>Personal Details</h2>
<fieldset>
<legend>Personal Details</legend>
<input type="text" id="fullname" pattern="[A-Za-z\s]{3,}" minlength="3" placeholder="Enter your name" required>
<input type="email" id="email" placeholder="Enter your email" required>
<input type="tel" id="phone" pattern="[0-9]{10}" maxlength="10" placeholder="Enter mobile number" required>
<p id="gender">Select your gender:
<label><input type="radio" name="gender" value="male" required> Male</label>
<label><input type="radio" name="gender" value="female" required> Female</label>
<label><input type="radio" name="gender" value="other" required> Other</label>
</p>
<p>Enter your age:
<input type="tel" id="age" min="18" max="100" maxlength="2" required>
</p>
</fieldset>
</form>
</div>
<div class="step" id="step2">
<h2>Professional Details</h2>
<form id="professional-details">
<p>Education</p>
<select id="education" required>
<option value="">Select your education</option>
<option value="Masters">PG or Above</option>
<option value="UG">UG</option>
<option value="Higher Secondary">12</option>
<option value="High School">10</option>
<option value="Below">Below 10</option>
</select>
<div class="skills">
<p>Select your skills</p>
<label><input type="checkbox" value="HTML & CSS"> HTML & CSS</label>
<label><input type="checkbox" value="JavaScript"> JavaScript</label>
<label><input type="checkbox" value="React"> React</label>
<label><input type="checkbox" value="DBMS"> DBMS</label>
<label><input type="checkbox" value="Java"> Java</label>
</div>
<p>Experience</p>
<input type="number" id="experience" min="0" max="50" placeholder="0-50 years" required>
<p>Current Role</p>
<input type="text" id="current-role" placeholder="Current Role" required>
</form>
</div>
<div class="step" id="step3">
<h2>Review & Submit</h2>
<div id="review"></div>
<button id="submit-btn">Submit</button>
<button id="refresh-btn">Reset</button>
</div>
<div id="btn-div">
<button id="prev-btn">Previous</button>
<button id="next-btn">Next</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

140
script.js Normal file
View file

@ -0,0 +1,140 @@
// initial
let currentStep = 1;
const totalSteps = 3;
document.getElementById("next-btn").addEventListener("click", function () {
if (validateStep(currentStep)) {
currentStep++;
showStep(currentStep);
}
else
{
alert("Please fill all the fields");
}
});
document.getElementById("prev-btn").addEventListener("click", function () {
currentStep--;
showStep(currentStep);
});
document.getElementById("submit-btn").addEventListener("click", function () {
if (validateStep(currentStep)) {
saveData();
alert("Form submitted successfully!");
}
});
document.getElementById("refresh-btn").addEventListener("click", function () {
localStorage.removeItem("formData");
location.reload();
});
function showStep(step) {
for (let i = 1; i <= totalSteps; i++) {
document.getElementById(`step${i}`).style.display = i === step ? "block" : "none";
}
document.getElementById("prev-btn").style.display = step === 1 ? "none" : "inline-block";
document.getElementById("next-btn").style.display = step === totalSteps ? "none" : "inline-block";
document.getElementById("submit-btn").style.display = step === totalSteps ? "inline-block" : "none";
document.getElementById("refresh-btn").style.display = step === totalSteps ? "inline-block" : "none";
updateReview();
}
function validateStep(step) {
const form = step === 1 ? document.getElementById("personal-details") : document.getElementById("professional-details");
return form.checkValidity();
}
function updateReview() {
if (currentStep === totalSteps) {
const review = document.getElementById("review");
review.innerHTML = `
<h3>Personal Details</h3>
<p>Full Name: ${document.getElementById("fullname").value}</p>
<p>Email: ${document.getElementById("email").value}</p>
<p>Phone: ${document.getElementById("phone").value}</p>
<p>Gender: ${document.querySelector('input[name="gender"]:checked').value}</p>
<p>Age: ${document.getElementById("age").value}</p>
<button type="button" id="edit-personal-details" onclick="editStep(1)">Edit</button>
<h3>Professional Details</h3>
<p>Education: ${document.getElementById("education").value}</p>
<p>Skills: ${Array.from(document.querySelectorAll('.skills input:checked')).map(el => el.value).join(", ")}</p>
<p>Experience: ${document.getElementById("experience").value}</p>
<p>Current Role: ${document.getElementById("current-role").value}</p>
<button type="button" id="edit-professional-details" onclick="editStep(2)">Edit</button>
`;
}
}
function saveData() {
const data = {
fullName: document.getElementById("fullname").value,
email: document.getElementById("email").value,
phone: document.getElementById("phone").value,
gender: document.querySelector('input[name="gender"]:checked')?.value,
age: document.getElementById("age").value,
education: document.getElementById("education").value,
skills: Array.from(document.querySelectorAll('.skills input:checked')).map(el => el.value),
experience: document.getElementById("experience").value,
currentRole: document.getElementById("current-role").value,
};
// Save to localStorage
localStorage.setItem("formData", JSON.stringify(data));
// Log saved data for debugging
console.log("Data saved to localStorage:", data);
}
function loadSavedData() {
const savedData = JSON.parse(localStorage.getItem("formData"));
// Log loaded data for debugging
console.log("Loaded Data from localStorage:", savedData);
if (savedData) {
document.getElementById("fullname").value = savedData.fullName;
document.getElementById("email").value = savedData.email;
document.getElementById("phone").value = savedData.phone;
document.querySelector(`input[name="gender"][value="${savedData.gender}"]`).checked = true;
document.getElementById("age").value = savedData.age;
document.getElementById("education").value = savedData.education;
savedData.skills.forEach(skill => {
document.querySelector(`.skills input[value="${skill}"]`).checked = true;
});
document.getElementById("experience").value = savedData.experience;
document.getElementById("current-role").value = savedData.currentRole;
}
}
function clearForm() {
document.getElementById("personal-details").reset();
document.getElementById("professional-details").reset();
const genderRadios = document.querySelectorAll('input[name="gender"]');
genderRadios.forEach(radio => radio.checked = false);
const skillCheckboxes = document.querySelectorAll('.skills input');
skillCheckboxes.forEach(checkbox => checkbox.checked = false);
}
function editStep(step) {
currentStep = step;
showStep(currentStep);
}
window.onload = function () {
clearForm();
showStep(currentStep);
loadSavedData();
};

130
style.css Normal file
View file

@ -0,0 +1,130 @@
body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(#FAF6E3, #D8DBBD, #B59F78);
height: 100vh;
width: 100vw;
}
html
{
scroll-behavior: smooth;
}
input, select, button {
border: 1px solid #ccc;
border-radius: 8px;
padding: 10px;
margin: 10px 0;
width: 100%;
box-sizing: border-box;
font-size: 16px;
}
input::placeholder {
font-size: 14px;
color: #888;
}
.form-container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
width: 75%;
max-width: 600px;
display: flex;
flex-direction: column;
}
#gender {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
gap: 20px;
}
.step {
display: none;
}
.step.active {
display: block;
}
#btn-div {
padding: 20px;
display: flex;
justify-content: space-between;
width: 100%;
}
#prev-btn, #next-btn, #submit-btn, #refresh-btn {
background-color: rgb(57, 57, 220);
color: white;
border: none;
border-radius: 10px;
padding: 10px 20px;
cursor: pointer;
max-width: 150px;
transition: background-color 0.3s ease;
margin-right: 35px;
}
#prev-btn:hover, #next-btn:hover, #submit-btn:hover, #refresh-btn:hover {
background-color: rgb(13, 13, 242);
transform: translateY(2px);
}
fieldset {
border: 1px solid #ccc;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
}
legend {
font-size: 18px;
font-weight: bold;
}
h2 {
text-align: center;
margin-bottom: 20px;
}
.skills label {
display: inline-block;
margin-bottom: 10px;
}
#review button {
background-color: #f17e13;
color: white;
border: none;
border-radius: 5px;
padding: 8px 15px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
margin-top: 10px;
max-width: 85px;
}
#review button:hover {
background-color: #ec971f;
transform: translateY(-2px);
}
#review button:focus {
outline: none;
}
#review button:active {
transform: translateY(2px);
}