Compare commits
No commits in common. "120ea43ba2fbb2d0ca57ada2e47829976fded8b2" and "3bc98247eafd450e14bfade124f06c8c997d337b" have entirely different histories.
120ea43ba2
...
3bc98247ea
183
index.html
183
index.html
|
|
@ -1,183 +0,0 @@
|
|||
<!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
84
script.js
|
|
@ -1,84 +0,0 @@
|
|||
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