Compare commits
2 commits
3bc98247ea
...
120ea43ba2
| Author | SHA1 | Date | |
|---|---|---|---|
 Rishav Jaiswal
|
120ea43ba2 | ||
|
Rishav Jaiswal
|
61d98e07d1 |
183
index.html
Normal file
183
index.html
Normal file
|
|
@ -0,0 +1,183 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>DML</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<script src="script.js" defer></script>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
</head>
|
||||||
|
<body class="h-screen bg-gray-500 flex flex-col justify-center items-center">
|
||||||
|
<h1 class="text-4xl font-bold mb-6">Multi-Step Form Wizard</h1>
|
||||||
|
<div class="px-12 py-10 bg-gray-100 w-[70vw]">
|
||||||
|
<form action="" id="personal-details-form" class="flex justify-center">
|
||||||
|
<section data-form="0" class="active none flex-col items-start">
|
||||||
|
<h3 class="text-2xl font-bold mb-4">Step 1: Personal Details</h3>
|
||||||
|
|
||||||
|
<label for="full_name" class="text-lg">Full Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="full_name"
|
||||||
|
id="full_name"
|
||||||
|
required
|
||||||
|
minlength="3"
|
||||||
|
pattern="^[A-Za-z]+(?: [A-Za-z]+)*$"
|
||||||
|
class="rounded p-1"
|
||||||
|
/>
|
||||||
|
<label for="email" class="text-lg">Email</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
id="email"
|
||||||
|
class="rounded p-1"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<label for="phone" class="text-lg">Phone</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
name="phone"
|
||||||
|
id="phone"
|
||||||
|
class="rounded p-1"
|
||||||
|
minlength="10"
|
||||||
|
maxlength="10"
|
||||||
|
pattern="[0-9]{10}"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<p class="text-lg">Gender</p>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="gender"
|
||||||
|
value="male"
|
||||||
|
class="rounded p-1"
|
||||||
|
id="male"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<label for="male" class="text-lg">Male</label>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="gender"
|
||||||
|
value="female"
|
||||||
|
class="rounded p-1"
|
||||||
|
id="female"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<label for="female" class="text-lg">Female</label>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="gender"
|
||||||
|
value="others"
|
||||||
|
class="rounded p-1"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<label for="others" class="text-lg">Others</label>
|
||||||
|
</div>
|
||||||
|
<label for="age" class="text-lg">Age</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="age"
|
||||||
|
id="age"
|
||||||
|
class="rounded p-1"
|
||||||
|
min="18"
|
||||||
|
max="100"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onclick="incrementStep()"
|
||||||
|
class="mt-3 py-1 px-4 bg-green-500 rounded"
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</button>
|
||||||
|
</section>
|
||||||
|
<section data-form="1" class="none flex-col items-start">
|
||||||
|
<h3 class="text-xl font-bold">Step 2: Professional Details</h3>
|
||||||
|
<label class="text-lg" for="education">Education</label>
|
||||||
|
<select name="education" id="education" required>
|
||||||
|
<option value="none">Select Education</option>
|
||||||
|
<option value="graduation">Graduation</option>
|
||||||
|
<option value="post-graduation">Post Graduation</option>
|
||||||
|
<option value="phd">PHD</option>
|
||||||
|
</select>
|
||||||
|
<div>
|
||||||
|
<label class="text-lg">Skills:</label>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" name="skills" id="mean" />
|
||||||
|
<label for="mean">MEAN</label>
|
||||||
|
<input type="checkbox" name="skills" id="mern" />
|
||||||
|
<label for="mern">MERN</label>
|
||||||
|
<input type="checkbox" name="skills" id="java" />
|
||||||
|
<label for="java">Java</label>
|
||||||
|
<input type="checkbox" name="skills" id="flutter" />
|
||||||
|
<label for="flutter">Flutter</label>
|
||||||
|
<input type="checkbox" name="skills" id="dotnet" />
|
||||||
|
<label for="dotnet">.Net</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<label class="text-lg" for="experience">Experience (in years)</label>
|
||||||
|
<input
|
||||||
|
class="rounded p-1"
|
||||||
|
type="number"
|
||||||
|
name="experience"
|
||||||
|
id="experience"
|
||||||
|
min="0"
|
||||||
|
max="50"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<label class="text-lg" for="current-role">Current Role</label>
|
||||||
|
<input
|
||||||
|
class="rounded p-1"
|
||||||
|
type="text"
|
||||||
|
name="current-role"
|
||||||
|
id="current-role"
|
||||||
|
pattern="^[A-Za-z]+(?: [A-Za-z]+)*$"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onclick="decrementStep()"
|
||||||
|
class="mt-3 py-1 px-4 bg-red-500 rounded"
|
||||||
|
>
|
||||||
|
Previous
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onclick="incrementStep()"
|
||||||
|
class="mt-3 py-1 px-4 bg-green-500 rounded"
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section data-form="2" class="none flex-col items-start">
|
||||||
|
<h3 class="text-xl font-bold">Step 3: Review & Submit</h3>
|
||||||
|
<div>
|
||||||
|
<p class="text-lg">Full Name: <span id="full-name-review"></span></p>
|
||||||
|
<p class="text-lg">Email: <span id="email-review"></span></p>
|
||||||
|
<p class="text-lg">Phone: <span id="phone-review"></span></p>
|
||||||
|
<p class="text-lg">Gender: <span id="gender-review"></span></p>
|
||||||
|
<p class="text-lg">Age: <span id="age-review"></span></p>
|
||||||
|
<p class="text-lg">Education: <span id="education-review"></span></p>
|
||||||
|
<p class="text-lg">Skills: <span id="skills-review"></span></p>
|
||||||
|
<p class="text-lg">Experience: <span id="experience-review"></span></p>
|
||||||
|
<p class="text-lg">Current Role: <span id="role-review"></span></p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onclick="decrementStep()"
|
||||||
|
class="mt-3 py-1 px-4 bg-red-500 rounded"
|
||||||
|
>
|
||||||
|
Previous
|
||||||
|
</button>
|
||||||
|
<button type="submit" class="mt-3 py-1 px-4 bg-green-500 rounded">
|
||||||
|
Submit
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
84
script.js
Normal file
84
script.js
Normal file
|
|
@ -0,0 +1,84 @@
|
||||||
|
const forms = document.querySelectorAll("[data-form]");
|
||||||
|
var currentStep = 0;
|
||||||
|
var currentForm = forms[currentStep];
|
||||||
|
|
||||||
|
var data = {};
|
||||||
|
|
||||||
|
function incrementStep() {
|
||||||
|
|
||||||
|
// Check if current form is filled
|
||||||
|
let inputs = currentForm.getElementsByTagName("input");
|
||||||
|
for (const input of inputs) {
|
||||||
|
if (!input.checkValidity()) {
|
||||||
|
input.reportValidity();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
let skills = [];
|
||||||
|
|
||||||
|
data["fullName"] = document.getElementById("full_name").value;
|
||||||
|
document.getElementById("full-name-review").innerText = data["fullName"];
|
||||||
|
|
||||||
|
data["email"] = document.getElementById("email").value;
|
||||||
|
document.getElementById("email-review").innerText = data["email"];
|
||||||
|
|
||||||
|
data["phone"] = document.getElementById("phone").value;
|
||||||
|
document.getElementById("phone-review").innerText = data["phone"];
|
||||||
|
|
||||||
|
data["gender"] = document.querySelector(
|
||||||
|
'input[name="gender"]:checked'
|
||||||
|
).value;
|
||||||
|
document.getElementById("gender-review").innerText = data["gender"];
|
||||||
|
|
||||||
|
data["age"] = document.getElementById("age").value;
|
||||||
|
document.getElementById("age-review").innerText = data["age"];
|
||||||
|
|
||||||
|
data["education"] = document.getElementById("education").value;
|
||||||
|
document.getElementById("education-review").innerText = data["education"];
|
||||||
|
|
||||||
|
data["skills"] = document.querySelectorAll('input[name="skills"]:checked');
|
||||||
|
// Iterating over the NodeList and extracting the id to store it in skills array
|
||||||
|
data["skills"].forEach((skill) => {
|
||||||
|
skills.push(skill.getAttribute("id"));
|
||||||
|
});
|
||||||
|
data["skills"] = skills;
|
||||||
|
// To clear previous innerText rendered
|
||||||
|
document.getElementById("skills-review").innerText = "";
|
||||||
|
document.getElementById("skills-review").innerText = data["skills"];
|
||||||
|
|
||||||
|
data["experience"] = document.getElementById("experience").value;
|
||||||
|
document.getElementById("experience-review").innerText = data["experience"];
|
||||||
|
|
||||||
|
data["currentRole"] = document.getElementById("current-role").value;
|
||||||
|
document.getElementById("role-review").innerText = data["currentRole"];
|
||||||
|
} catch (error) {
|
||||||
|
// Do nothing
|
||||||
|
}
|
||||||
|
|
||||||
|
// Changing the visiblity of the form
|
||||||
|
currentForm.classList.remove("active");
|
||||||
|
currentStep = Math.min(currentStep + 1, forms.length - 1);
|
||||||
|
currentForm = forms[currentStep];
|
||||||
|
currentForm.classList.add("active");
|
||||||
|
}
|
||||||
|
|
||||||
|
function decrementStep() {
|
||||||
|
// Changing the visiblity of the form
|
||||||
|
|
||||||
|
currentForm.classList.remove("active");
|
||||||
|
currentStep = Math.max(currentStep - 1, 0);;
|
||||||
|
currentForm = forms[currentStep];
|
||||||
|
currentForm.classList.add("active");
|
||||||
|
}
|
||||||
|
document
|
||||||
|
.querySelector('button[type="submit"]')
|
||||||
|
.addEventListener("click", function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
window.localStorage.clear();
|
||||||
|
window.localStorage.setItem("formData", JSON.stringify(data));
|
||||||
|
window.alert("Form submitted successfully");
|
||||||
|
window.location.href = "/";
|
||||||
|
});
|
||||||
Loading…
Reference in a new issue