|
|
@@ -1,59 +1,72 @@
|
|
|
// 1. horizontal wizard
|
|
|
"use strict";
|
|
|
var currentTab = 0;
|
|
|
+let nextBtn;
|
|
|
+let submitBtn;
|
|
|
showTab(currentTab);
|
|
|
function showTab(n) {
|
|
|
- var x = document.getElementsByClassName("tab");
|
|
|
- x[n].style.display = "block";
|
|
|
- if (n == 0) {
|
|
|
- document.getElementById("prevBtn").style.display = "none";
|
|
|
- } else {
|
|
|
- document.getElementById("prevBtn").style.display = "inline";
|
|
|
- }
|
|
|
- if (n == x.length - 1) {
|
|
|
- // document.getElementById("nextBtn").innerHTML = "Invia";
|
|
|
- document.getElementById("nextBtn").innerHTML = "Avanti";
|
|
|
- } else {
|
|
|
- document.getElementById("nextBtn").innerHTML = "Avanti";
|
|
|
- }
|
|
|
- fixStepIndicator(n);
|
|
|
+ var x = document.getElementsByClassName("tab");
|
|
|
+ x[n].style.display = "block";
|
|
|
+ if (n == 0) {
|
|
|
+ document.getElementById("prevBtn").style.display = "none";
|
|
|
+ } else {
|
|
|
+ document.getElementById("prevBtn").style.display = "inline";
|
|
|
+ }
|
|
|
+ if (n == x.length - 1) {
|
|
|
+ // document.getElementById("nextBtn").innerHTML = "Invia";
|
|
|
+ document.getElementById("nextBtn").innerHTML = "Avanti";
|
|
|
+ } else {
|
|
|
+ document.getElementById("nextBtn").innerHTML = "Avanti";
|
|
|
+ }
|
|
|
+ fixStepIndicator(n);
|
|
|
}
|
|
|
function nextPrev(n) {
|
|
|
- var x = document.getElementsByClassName("tab");
|
|
|
- if (n == 1 && !validateForm()) return false;
|
|
|
- x[currentTab].style.display = "none";
|
|
|
- currentTab = currentTab + n;
|
|
|
- if (currentTab >= x.length) {
|
|
|
- document.getElementById("regForm").submit();
|
|
|
- return false;
|
|
|
- }
|
|
|
- showTab(currentTab);
|
|
|
+ nextBtn = document.getElementById("nextBtn");
|
|
|
+ submitBtn = document.getElementById("submitBtn");
|
|
|
+
|
|
|
+ var x = document.getElementsByClassName("tab");
|
|
|
+ if (n == 1 && !validateForm()) return false;
|
|
|
+ x[currentTab].style.display = "none";
|
|
|
+ currentTab = currentTab + n;
|
|
|
+ if (currentTab == x.length - 1) {
|
|
|
+ nextBtn.style.display = "none";
|
|
|
+ submitBtn.style.display = "";
|
|
|
+ } else {
|
|
|
+ submitBtn.style.display = "none";
|
|
|
+ nextBtn.style.display = "";
|
|
|
+ }
|
|
|
+ if (currentTab >= x.length) {
|
|
|
+ document.getElementById("regForm").submit();
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ showTab(currentTab);
|
|
|
}
|
|
|
function validateForm() {
|
|
|
- var x,
|
|
|
- y,
|
|
|
- i,
|
|
|
- valid = true;
|
|
|
- x = document.getElementsByClassName("tab");
|
|
|
- y = x[currentTab].getElementsByTagName("input");
|
|
|
- for (i = 0; i < y.length; i++) {
|
|
|
- if (y[i].value == "") {
|
|
|
- y[i].className += " invalid";
|
|
|
- valid = false;
|
|
|
+ var x,
|
|
|
+ y,
|
|
|
+ i,
|
|
|
+ valid = true;
|
|
|
+ x = document.getElementsByClassName("tab");
|
|
|
+ y = x[currentTab].getElementsByTagName("input");
|
|
|
+ for (i = 0; i < y.length; i++) {
|
|
|
+ if (y[i].value == "") {
|
|
|
+ y[i].className += " invalid";
|
|
|
+ valid = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (valid) {
|
|
|
+ document.getElementsByClassName("step")[currentTab].className +=
|
|
|
+ " finish";
|
|
|
}
|
|
|
- }
|
|
|
- if (valid) {
|
|
|
- document.getElementsByClassName("step")[currentTab].className += " finish";
|
|
|
- }
|
|
|
- return valid;
|
|
|
+ return valid;
|
|
|
}
|
|
|
function fixStepIndicator(n) {
|
|
|
- var i,
|
|
|
- x = document.getElementsByClassName("step");
|
|
|
- for (i = 0; i < x.length; i++) {
|
|
|
- x[i].className = x[i].className.replace(" active", "");
|
|
|
- }
|
|
|
- x[n].className += " active";
|
|
|
+ var i,
|
|
|
+ x = document.getElementsByClassName("step");
|
|
|
+ for (i = 0; i < x.length; i++) {
|
|
|
+ x[i].className = x[i].className.replace(" active", "");
|
|
|
+ }
|
|
|
+ x[n].className += " active";
|
|
|
}
|
|
|
// 2. Numbering wizard
|
|
|
var form = document.getElementById("msform");
|
|
|
@@ -61,65 +74,65 @@ var fieldsets = form.querySelectorAll("form");
|
|
|
var currentStep = 0;
|
|
|
var numSteps = 5;
|
|
|
for (var i = 1; i < fieldsets.length; i++) {
|
|
|
- fieldsets[i].style.display = "none";
|
|
|
+ fieldsets[i].style.display = "none";
|
|
|
}
|
|
|
function nextStep() {
|
|
|
- document.getElementById("backbtn").disabled = false;
|
|
|
- currentStep++;
|
|
|
- if (currentStep > numSteps) {
|
|
|
- currentStep = 1;
|
|
|
- }
|
|
|
- var stepper = document.getElementById("stepper1");
|
|
|
- var steps = stepper.getElementsByClassName("step");
|
|
|
- Array.from(steps).forEach((step, index) => {
|
|
|
- let stepNum = index + 1;
|
|
|
- let stepLength = steps.length;
|
|
|
- if (stepNum === currentStep && currentStep < stepLength) {
|
|
|
- addClass(step, "editing");
|
|
|
- fieldsets[currentStep].style.display = "flex";
|
|
|
- } else {
|
|
|
- removeClass(step, "editing");
|
|
|
- }
|
|
|
- if (stepNum <= currentStep && currentStep < stepLength) {
|
|
|
- addClass(step, "done");
|
|
|
- addClass(step, "active");
|
|
|
- removeClass(step, "editing");
|
|
|
- fieldsets[currentStep - 1].style.display = "none";
|
|
|
- } else {
|
|
|
- removeClass(step, "done");
|
|
|
- }
|
|
|
- if (currentStep == stepLength - 1) {
|
|
|
- document.getElementById("nextbtn").textContent = "Avanti";
|
|
|
- }
|
|
|
- if (currentStep > stepLength - 1) {
|
|
|
- document.getElementById("nextbtn").textContent = "Avanti";
|
|
|
- addClass(step, "done");
|
|
|
- addClass(step, "active");
|
|
|
- removeClass(step, "editing");
|
|
|
- document.getElementById("nextbtn").disabled = true;
|
|
|
+ document.getElementById("backbtn").disabled = false;
|
|
|
+ currentStep++;
|
|
|
+ if (currentStep > numSteps) {
|
|
|
+ currentStep = 1;
|
|
|
}
|
|
|
- });
|
|
|
+ var stepper = document.getElementById("stepper1");
|
|
|
+ var steps = stepper.getElementsByClassName("step");
|
|
|
+ Array.from(steps).forEach((step, index) => {
|
|
|
+ let stepNum = index + 1;
|
|
|
+ let stepLength = steps.length;
|
|
|
+ if (stepNum === currentStep && currentStep < stepLength) {
|
|
|
+ addClass(step, "editing");
|
|
|
+ fieldsets[currentStep].style.display = "flex";
|
|
|
+ } else {
|
|
|
+ removeClass(step, "editing");
|
|
|
+ }
|
|
|
+ if (stepNum <= currentStep && currentStep < stepLength) {
|
|
|
+ addClass(step, "done");
|
|
|
+ addClass(step, "active");
|
|
|
+ removeClass(step, "editing");
|
|
|
+ fieldsets[currentStep - 1].style.display = "none";
|
|
|
+ } else {
|
|
|
+ removeClass(step, "done");
|
|
|
+ }
|
|
|
+ if (currentStep == stepLength - 1) {
|
|
|
+ document.getElementById("nextbtn").textContent = "Avanti";
|
|
|
+ }
|
|
|
+ if (currentStep > stepLength - 1) {
|
|
|
+ document.getElementById("nextbtn").textContent = "Avanti";
|
|
|
+ addClass(step, "done");
|
|
|
+ addClass(step, "active");
|
|
|
+ removeClass(step, "editing");
|
|
|
+ document.getElementById("nextbtn").disabled = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
function backStep() {
|
|
|
- currentStep--;
|
|
|
- var stepper = document.getElementById("stepper1");
|
|
|
- var steps = stepper.getElementsByClassName("step");
|
|
|
- let stepLength = steps.length;
|
|
|
- document.getElementById("nextbtn").textContent = "Next";
|
|
|
- document.getElementById("nextbtn").disabled = false;
|
|
|
- if (currentStep < stepLength - 1) {
|
|
|
- document.getElementById("backbtn").disabled = false;
|
|
|
- fieldsets[currentStep + 1].style.display = "none";
|
|
|
- fieldsets[currentStep].style.display = "flex";
|
|
|
- removeClass(steps[currentStep], "done");
|
|
|
- removeClass(steps[currentStep], "active");
|
|
|
- if (currentStep == 0) {
|
|
|
- document.getElementById("backbtn").disabled = true;
|
|
|
+ currentStep--;
|
|
|
+ var stepper = document.getElementById("stepper1");
|
|
|
+ var steps = stepper.getElementsByClassName("step");
|
|
|
+ let stepLength = steps.length;
|
|
|
+ document.getElementById("nextbtn").textContent = "Next";
|
|
|
+ document.getElementById("nextbtn").disabled = false;
|
|
|
+ if (currentStep < stepLength - 1) {
|
|
|
+ document.getElementById("backbtn").disabled = false;
|
|
|
+ fieldsets[currentStep + 1].style.display = "none";
|
|
|
+ fieldsets[currentStep].style.display = "flex";
|
|
|
+ removeClass(steps[currentStep], "done");
|
|
|
+ removeClass(steps[currentStep], "active");
|
|
|
+ if (currentStep == 0) {
|
|
|
+ document.getElementById("backbtn").disabled = true;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ removeClass(steps[currentStep], "done");
|
|
|
+ removeClass(steps[currentStep], "active");
|
|
|
}
|
|
|
- } else {
|
|
|
- removeClass(steps[currentStep], "done");
|
|
|
- removeClass(steps[currentStep], "active");
|
|
|
- }
|
|
|
}
|
|
|
// function prevStep(){
|
|
|
// fieldsets[currentStep].style.display = "none";
|
|
|
@@ -128,21 +141,21 @@ function backStep() {
|
|
|
// }
|
|
|
/* get, set class, see https://ultimatecourses.com/blog/javascript-hasclass-addclass-removeclass-toggleclass */
|
|
|
function hasClass(elem, className) {
|
|
|
- return new RegExp(" " + className + " ").test(" " + elem.className + " ");
|
|
|
+ return new RegExp(" " + className + " ").test(" " + elem.className + " ");
|
|
|
}
|
|
|
function addClass(elem, className) {
|
|
|
- if (!hasClass(elem, className)) {
|
|
|
- elem.className += " " + className;
|
|
|
- }
|
|
|
+ if (!hasClass(elem, className)) {
|
|
|
+ elem.className += " " + className;
|
|
|
+ }
|
|
|
}
|
|
|
function removeClass(elem, className) {
|
|
|
- console.log("elem, className", elem, className);
|
|
|
- var newClass = " " + elem.className.replace(/[\t\r\n]/g, " ") + " ";
|
|
|
- if (hasClass(elem, className)) {
|
|
|
- while (newClass.indexOf(" " + className + " ") >= 0) {
|
|
|
- newClass = newClass.replace(" " + className + " ", " ");
|
|
|
+ console.log("elem, className", elem, className);
|
|
|
+ var newClass = " " + elem.className.replace(/[\t\r\n]/g, " ") + " ";
|
|
|
+ if (hasClass(elem, className)) {
|
|
|
+ while (newClass.indexOf(" " + className + " ") >= 0) {
|
|
|
+ newClass = newClass.replace(" " + className + " ", " ");
|
|
|
+ }
|
|
|
+ elem.className = newClass.replace(/^\s+|\s+$/g, "");
|
|
|
}
|
|
|
- elem.className = newClass.replace(/^\s+|\s+$/g, "");
|
|
|
- }
|
|
|
- console.log("elem.className", elem.className);
|
|
|
+ console.log("elem.className", elem.className);
|
|
|
}
|