Hello, en gros ce que tu souhaites c'est que ton formulaire soit rempli avec les valeurs saisies, lorsqu'il revient sur le formulaire qu'il aurait rempli sans avoir validé, j'ai bien compris ?
Si c'est bien ça tu peux tout simplement utilisé le localStorage ou le sessionStorage selon ce que tu souhaites faire. Et tu enregistre chaque input tt simplement.
Exemple tu as un formulaire comme cela
<form id="userForm">
<label for="firstname">Nom</label>
<input type="text" name="firstname" id="firstname" value=""/>
<label for="lastname">Prénom</label>
<input type="text" name="lastname" id="lastname" value=""/>
<button type="submit">Envoyer</button>
</form>
<script>
// Fonction pour sauvegarder dans le localStorage
function saveToStorage(key, value) {
localStorage.setItem(key, value);
}
// Fonction pour récupérer les valeurs du localStorage
function loadFromStorage(key, element) {
const value = localStorage.getItem(key);
if (value) {
element.value = value;
}
}
// Gestion du DOM prêt pour charger les valeurs sauvegardées
document.addEventListener("DOMContentLoaded", () => {
loadFromStorage("firstname", document.getElementById("firstname"));
loadFromStorage("lastname", document.getElementById("lastname"));
});
// Événement d'ajout des données dans le localStorage lorsque le champ de saisie est quitté (clic ailleur que dans le champ)
// Tu peux remplacer "blur" par "input" si tu pref sauvegarder a chaque frappe utilisateur mais c'est moins performant
document.getElementById("firstname").addEventListener("blur", (e) => {
saveToStorage("firstname", e.target.value);
});
document.getElementById("lastname").addEventListener("blur", (e) => {
saveToStorage("lastname", e.target.value);
});
// Gestion de la soumission du formulaire
document.getElementById("userForm").addEventListener("submit", (e) => {
e.preventDefault();
const firstname = document.getElementById("firstname").value.trim();
const lastname = document.getElementById("lastname").value.trim();
if (firstname && lastname) {
// Nettoyer les champs dans le localStorage après soumission
localStorage.removeItem("firstname");
localStorage.removeItem("lastname");
}
});
</script>
flojin