Hey,
I complete the survey project, but I wanted to add an option.
Save the form data.
So I tried to use localstorage, I succeed to save my data but it won’t come back when I F5 my form.
Why ?
Here is the bootstrap code :
<div class="form-row" id="survey-form">
<div class="form-group col-md-4 text-white">
<label id="name-label" for="name">Nom</label>
<input
type="text"
class="form-control bg-dark text-white"
id="name"
placeholder="Nom"
/>
</div>
<div class="form-group col-md-4 text-white">
<label id="email-label" for="email">Email</label>
<input
type="email"
class="form-control bg-dark text-white"
id="email"
placeholder="Email"
required="email"
/>
</div>
<div class="form-group col-md-4 text-white">
<label id="number-label" for="age"> Age</label>
<input
type="number"
class="form-control bg-dark text-white"
id="number"
min="10"
max="100"
placeholder="Age"
required
/>
</div>
</div>
<div class="text-right">
<button
type="submit"
id="submit"
class="btn btn-primary mb-3 "
>
Envoyer
</button>
<div class="text-right">
<button
type="submit"
id="recup"
class="btn btn-primary mb-3"
>
Récupérer
</button>
Here is the JS code.
document.getElementById("submit").onclick = function() {
if (typeof localStorage != "undefined" && JSON) {
var coordonnees = {
name: document.getElementById("name").value,
email: document.getElementById("email").value,
age: document.getElementById("number").value
};
localStorage.setItem("coord", JSON.stringify(coordonnees));
alert("Mémorisation effectuée");
} else alert("localStorage n'est pas supporté");
};
// Méthode de lecture
document.getElementById("recup").onclick = function() {
if (typeof localStorage != "undefined" && JSON) {
var coordonnees = JSON.parse(localStorage.getItem("coord"));
document.getElementById("name").value = coordonnees.name;
document.getElementById("email").value = coordonnees.email;
document.getElementById("number").value = coordonnees.number;
alert("Lecture effectuée");
} else alert("localStorage n'est pas supporté");
};