Utiliser localstorage pour enregistrer et masquer un formulaire
Salut tout le monde,
Quelqu'un pourrait m'aider avec la fonction localstorage? J'ai un formulaire multi-steps et j'aimerais enregistrer l'étape où se trouve l'utilisateur, afin qu'il ne repart du début en cas de changement de page.
J'aimerais aussi ne plus jamais afficher le formulaire, si l'utilisateur clique sur le dernier bouton "Let's go".
Voici le code fiddle: https://jsfiddle.net/khbjvtd0/1/
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| if (localStorage.getItem('step') !== null) {
var currentTab = +localStorage.getItem("step");
} else {
var currentTab = 0;
}
// Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form...
var x = document.getElementsByClassName("tabM");
x[n].style.display = "block";
//... and fix the Previous/Next buttons:
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 = "Let's go";
} else {
document.getElementById("nextBtn").innerHTML = "Suivant";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tabM");
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
window.localStorage.setItem('step', currentTab);
document.getElementById("demo").innerHTML = localStorage.getItem("step");
// if you have reached the end of the form...
if (currentTab >= x.length) {
// ... the form gets submitted:
document.getElementById("regForm").style.display = "none";
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("stepM");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[n].className += " active";
} |
Merci.
