diff --git a/index.html b/index.html new file mode 100644 index 0000000..89bdf35 --- /dev/null +++ b/index.html @@ -0,0 +1,169 @@ + + + + + + DML + + + + + +
+
+
+

Step 1: Personal Details

+ + + + + + + +
+

Gender

+ + + + + + +
+ + + +
+
+

Step 2: Professional Details

+ + +
+ +
+ + + + + + + + + + +
+
+ + + + +
+ + +
+
+
+
+ + +
+
+
+
+ + diff --git a/script.js b/script.js new file mode 100644 index 0000000..9caccba --- /dev/null +++ b/script.js @@ -0,0 +1,56 @@ +// const form = document.getElementById("personal-details-form"); // Main form element + +// const inputs = form.getElementsByTagName("input"); // All the input elements in the form + +// var currentForm = form.querySelectorAll("[data-form]") // Get the current form selected + +// var currentStep = parseInt(currentForm[0].getAttribute("data-form")); // Get the current step +// console.log(currentForm[0].getAttribute("data-form")); + +// function incrementStep() { +// // Check if current form is filled +// console.log(currentForm); + +// currentForm[currentStep].classList.remove("active"); +// currentStep++; +// currentForm[currentStep].classList.add("active"); +// console.log(currentForm[currentStep].getAttribute("data-form")); +// } + +// function decrementStep() { +// currentForm[currentStep].classList.remove("active"); +// currentStep--; +// currentForm[currentStep].classList.add("active"); +// console.log(currentForm[currentStep].getAttribute("data-form")); +// } + +const forms = document.querySelectorAll("[data-form]"); +var currentStep = 0; +var currentForm = forms[currentStep]; + +function incrementStep() { + // Check if current form is filled + + let inputs = currentForm.getElementsByTagName("input"); + for (const input of inputs) { + if (!input.checkValidity()) { + input.reportValidity(); + return; + } + } + + // Changing the visiblity of the form + currentForm.classList.remove("active"); + currentStep++; + currentForm = forms[currentStep]; + currentForm.classList.add("active"); +} + +function decrementStep() { + // Changing the visiblity of the form + + currentForm.classList.remove("active"); + currentStep--; + currentForm = forms[currentStep]; + currentForm.classList.add("active"); +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..2a336fa --- /dev/null +++ b/style.css @@ -0,0 +1,6 @@ +section{ + display: none; +} +.active { + display: flex; +} \ No newline at end of file