Sauvegarder les états des boutons radio après soumission

**chris830** · 26/09/2024, 10h02

Voila mon probleme: j'ai des boutons radio dans une boucle, dans un formulaire (en spring boot) et j'aimerai que le bouton radio qui a ete coche reste coche apres soumission du form et surtout quand on reviens sur la page de choix, histoire de ne pas pouvoir recoche le meme choix(en JS). En gros, je fais un choix, je submit =>ca m'envoie sur une autre page mais quand je reviens sur ma page de choix, le choix precedent devra etre disabled. J'arrive a disabled le bouton, a save le form, a creer un cookie mais je n'arrive pas a faire les 3 en meme temps

Je vous mets mon form :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<form action="#" th:action="@{/piece}" modelAttribute="piece"  method="post"
	 name="formP" onsubmit="saveform()">
		<tr th:each="piece: ${pieces}">
			<input type="submit" name="submit" value="${piece.nom}" th:value="'Valider : '+ ${piece.nom}"
			 onsubmit="" />
			<label class="radio-image">
				<input type="radio" name="img" th:value="${piece.img}" onclick="check()"  required>
				<img th:src="@{${'/images/'+ piece.img}}" />
			</label>
			<br>
		</tr>
	</form>

Ma fonction js pour rendre mon bouton non cochable et recupere mon cookie

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
function check() {
	var btnPieceRad = document.getElementsByName('img');
	for (i = 0; i < btnPieceRad.length; i++) {
		if ((btnPieceRad[i].checked )) {
			var valeur = btnPieceRad[i].value;
 
			btnPieceRad[i].disabled = true;
			document.cookie = 'cdtest=' + valeur + ';path=/piece;';
		}
	}
 
}

Et du coup je sais quoi faire de mon cookie

Merci de votre aide

**gabi7756** · 26/09/2024, 14h37

Bonjour,
Ma question c'est pourquoi faire ca ?
Revenir sur un form et conservé la précédente saisie , en cas de crash a peut servir a ne pas tout retaper.
Mais disable le choix quand tu reviens en arrière ... C'est bizarre comme procédé et pas très user friendly

J'ai beau chercher un exemple je vois pas . Donc si tu pouvais éclaircir ce point.

Ton point de blocage est lequel du coup ?
Parce quand tu charges ton form, tu vérifies s'il y a un cookie : document.cookie , tu met a jour le form suivant la data , si tel valeur tu disabled ce champ sinon l'autre ...

Merci

**chris830** · 26/09/2024, 14h52

Je suis en train de faire un jeu type cluedo: tu cherche a trouver un lieu, une arme et un suspect (select au random en debut de partie), donc tu choisis un premier un lieu , ensuite une arme ensuite un suspect et retour a la case piece si tu ne l'as trouvé ... Et c'est la que je veux que le premier choix soit deja coché (la piece choisie au premier tour) et ainsi de suite au fur et a mesure des tours que les choix deja coches apparaissent en non cochable du coup.
Et mon point de blocage est comment lors du retour a la page du choix de la piece, le radio du cookie(1er choix) soit deja cheched ou disabled.
Merci

**NoSmoking** · 27/09/2024, 19h17

Bonjour et bienvenue sur DVP.
Tu pourrais regarder du côté de localStorage, ou sessionStorage si besoin, pour préserver les données entre deux appels de ta page, peut-être plus simple à mettre en oeuvre que les cookies.

Ressources :

PS : pourquoi ne pas passer plutôt par des <select> ?

**chris830** · 28/09/2024, 11h58

Merci de la réponse.
Je suis débutante et vu qu'il a des photos attribuées a chaque radio cela me paraissait plus logique de faire comme ca, mais ma logique n'est peut-être pas bonne

.
Je suis en train de faire avec un local storage mais je ne sais pas comment faire pour rendre inactif la valeur de ma data stockée. J'ai essayé de faire comme ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function saveform() {
	var valeur = document.querySelector("input[name=img]:checked").value;
 
	var ls = localStorage.getItem(valeur);
 
	ls.getElementsByName('radio').disabled = true;
	}

Sans succès...

**chris830** · 30/09/2024, 17h38

Alors j'ai fait ca(si ca peut aidé quelqu'un) et ca marche nickel !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
function check() {
	var btnPieceRad = document.getElementsByName('img');
 
	for (var i = 0; i < btnPieceRad.length; i++) {
 
		if ((btnPieceRad[i].checked)) {
			var valeur = btnPieceRad[i].value;
			localStorage.setItem(1, valeur);
 
		}
 
		}		
}
window.onload = function() {
	var radPiece = localStorage.getItem(1);
 
	if (radPiece) {
		var btnPieceRad = document.getElementsByName('img');
		for (var i = 0; i < btnPieceRad.length; i++) {
			if (btnPieceRad[i].value === radPiece) {
				btnPieceRad[i].checked = true;
				btnPieceRad[i].disabled = true;
			}
		}
	}
}

Le bouton est bien coché quand je reviens sur la page,maintenant il faut que je reflechisse a comment faire pour cocher les boutons au fur et a mesure des choix. Je suppose qu'il faut que je fasse un tableau avec mes storage.
Si une idée vous passe par la tete

**NoSmoking** · 01/10/2024, 16h23

Je suis débutante et vu qu'il a des photos attribuées a chaque radio cela me paraissait plus logique de faire comme ca, mais ma logique n'est peut-être pas bonne

.

à ce niveau c'est plutôt une question d'ergonomie/présentation et tu es la seule juge.

Alors j'ai fait ca ...
localStorage.setItem(1, valeur);

Il est fortement conseillé d'utiliser des clés, pour le localStorage, qui est une signification, cela simplifie la gestion et notamment le nettoyage.

Dans ce cas il serait donc plus judicieux d'écrire, par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

localStorage.setItem("JEU_lieu", valeur);

... ainsi tu pourrais avoir quelque chose de simple comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
JEU_arme	["clef-anglaise"]
JEU_lieu	["cuisine"]
JEU_suspect	["moutarde"]

De plus cette fonction devrait être générique pour que tu puisses passer la référence, ici "lieu", cela permettrait de la mettre dans un fichier.js et de l'appeler dans tes différentes pages.

maintenant il faut que je reflechisse a comment faire pour cocher les boutons au fur et a mesure des choix.

tu peux utiliser l'événement input sur l'élément <form>.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
elementForm.addEventListener("input", () => {
  // sera réalisé à chaque changement
});

? Interrogation de ma part

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

btnPieceRad[i].disabled = true;

... est-ce à dire qu'une fois le choix fait tu ne peux plus revenir dessus !?!

**chris830** · 02/10/2024, 09h04

? Interrogation de ma part

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

btnPieceRad[i].disabled = true;

... est-ce à dire qu'une fois le choix fait tu ne peux plus revenir dessus !?!

Oui c'est ca, étant donné que le lieu du crime est choisi au random au début de la partie, je veux rendre disabled les choix qui ont déjà été sélectionne par le joueur jusqu'à ce qu'il trouve le lieu du crime.

Et c'est pour ca que je pensais mettre des valeurs numériques en clé de mon localStorage, pour peut-être incrémenter mes cles au fur et a mesure des choix selectionnés.(1er choix=>storage(1,valeur),2eme choix => storage(2,valeur) et ainsi de suite. Mais pour ca , il faut que je trouve comment faire des multi storage. Et peut-être que je devrai passer par des checkbox pour recuperer plusieurs valeurs en fait... A suivre...

En tout cas déjà un grand merci de prendre du temps...

**chris830** · 03/10/2024, 09h04

Bon en fait j'ai tout repris et trouvé ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window.addEventListener('load',()=>{
	const checked = JSON.parse(localStorage.getItem('checked') || '[]');
	const checks = document.querySelectorAll('#formP input[name=img]');
	checked.forEach((chk,i)=>{
		checks[i].checked = checks[i].disabled = chk;
	})
	const form = document.getElementById('formP');
	form.addEventListener('click',(e)=>{
		const tgt = e.target;
		if(!tgt.name === 'img')return;
		checks.forEach((check,i)=>checked[i]=check.checked);
		localStorage.setItem('checked',JSON.stringify(checked));
 
	});
});

Ca marche nickel, j'ai juste du mettre des select a la place des radios, par contre du coup il faudrait que mes select se comporte comme des boutons radio pour qu'un seul choix soit cochable. Je ne sais pas comment sélectionné mes boutons qui ne sont pas coché, si quelqu'un a une idée...
Merci

**gabi7756** · 03/10/2024, 09h18

Bonjour,
C'est peut être mieux des checkbox pour utiliser sur téléphone ... Plus pratique en soit ... Après tu fais comme tu veux
Pour déselectionner les checkbox pour que ca aie le même comportement qu'un radio :
Met une classe myCheckbox ou autre à tes input mais il faut un sélécteur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
document.querySelectorAll(".myCheckbox").forEach(element => {
    element.addEventListener('click',resetCheckbox)
})
 
function resetCheckbox(event) {
  // case cochée ou décochée
  if (event.target.checked) {
    // Déselection des autres checkbox
    document.querySelectorAll(".myCheckbox:checked").forEach(checkbox => {
      if (checkbox !== event.target) {
        checkbox.checked = false;
      }
    });
  }
}

Pour répondre spécifiquement à ta question pour récupéré tout les checkbox qui ne sont pas coché :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.querySelectorAll(".myCheckbox:not(:checked)");

Cdt

**chris830** · 03/10/2024, 09h49

Ca marche nickel je te remercie, par contre il va falloir que je rajoute une condition parce que ca ne me garde pas en disabled (de mon 'window.addEventListener' du dessus) les choix précedents...
Je suppose que du coup pour selectionner les checkbox disabled je fais:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.querySelectorAll(".myCheckbox(:disabled)");

A suivre...
Merci

**NoSmoking** · 03/10/2024, 09h58

Pour répondre à certains de tes questionnements, je te livre un petit exemple de ce que l'on peut faire concernant la gestion du localStorage, ton approche via un tableau étant la bonne.

Exemple en ligne :

Utilisation du localStorage avec un formulaire

C'est sur base de <input type="radio">.

**chris830** · 04/10/2024, 08h19

Envoyé par NoSmoking

Exemple en ligne :

Utilisation du localStorage avec un formulaire

Très intéressant cet exemple

, serait-il possible de voir le code correspondant? Cela pourrait peut-être m'aider à résoudre mon problème.
Merci

**gabi7756** · 04/10/2024, 08h36

Bonjour,
Voici un exemple de comment cela pourrait ce traduire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<form id="form">
    <label>
      <input type="checkbox" class="myCheckbox" name="option1" value="option1"> Option 1
    </label>
    <br>
    <label>
      <input type="checkbox" class="myCheckbox" name="option2" value="option2"> Option 2
    </label>
    <br>
    <label>
      <input type="checkbox" class="myCheckbox" name="option3" value="option3"> Option 3
    </label>
    <br>
    <label>
      <input type="checkbox" class="myCheckbox" name="option4" value="option4" disabled checked> Option 4
    </label>
    <input type="submit" value="Envoyer le formulaire" />
  </form>
 
 
<script>
document.getElementById("myButton").addEventListener("click", function() {
    var document2=document.querySelector('#iframe').contentDocument
document2.querySelector('#test').style.color='blue'
});
 
document.querySelectorAll(".myCheckbox").forEach(element => {
    element.addEventListener('click',resetCheckbox)
})
 
function resetCheckbox(event) {
  // case cochée ou décochée
  if (event.target.checked) {
    // Déselection des autres checkbox
    document.querySelectorAll(".myCheckbox:checked:not(:disabled)").forEach(checkbox => {
      if (checkbox !== event.target) {
        checkbox.checked = false;
      }
    });
  }
}
 
document.querySelector('#form').addEventListener('submit',function(){
  // localStorage.clear() Vide le localstorage 
  event.preventDefault() 
  var checkedCheckboxes = document.querySelector(".myCheckbox:checked:not(:disabled)");
  localStorage.setItem(localStorage.length,checkedCheckboxes.value)
})
</script>

J'ai rajouté : :not(:disabled) en sélécteur puisque ca sera surement mieux au visuel de voir les case disabled déja coché . A toi de voir si ca te convient ou pas

Edit : J'ai oublié de dire comment récupéré la date pour mettre à jour le form :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

localStorage.getItem(key)

Tu boucles sur ton localstorage et tu met en disabled tout tes boutons qui sont dans le localstorage , a toi de voir tu stocke quoi dans le localStorage , que l'id , la value , toute la balise ETC

Du coup il faut une fonction qui sauvegarde la saisie lors de la soumission du form
Une fonction qui met a jour les checkbox au chargement de la page en prenant en compte les données du localstorage
Cdt

**ProgElecT** · 04/10/2024, 08h44

Salut

Envoyé par chris830

Très intéressant cet exemple

, serait-il possible de voir le code correspondant? Cela pourrait peut-être m'aider à résoudre mon problème.
Merci

Pour voir le code de la page affichée à l'écran, depuis le navigateur, touche clavier Ctrl+U ouvre un nouvel onglet view-source:https://adresseDeLapage.html

**gabi7756** · 04/10/2024, 08h47

Envoyé par ProgElecT

Pour voir le code de la page affichée à l'écran, depuis le navigateur, touche clavier Ctrl+U ouvre un nouvel onglet view-source:https://adresseDeLapage.html

Je connaissais pas et c'est diablement pratique

**chris830** · 04/10/2024, 08h49

Envoyé par ProgElecT

Pour voir le code de la page affichée à l'écran, depuis le navigateur, touche clavier Ctrl+U ouvre un nouvel onglet view-source:https://adresseDeLapage.html

Oui, désolée ,c'est ce que j'avais fait pour regarder le comportement des localStorage mais j'ai pas percuté que le JS était plus bas sur la page

**NoSmoking** · 04/10/2024, 09h13

Ah ! ce fameux Ctl + U, une bénédiction comme la touche F12 d’ailleurs

Je reporte ici le code JS complet de la page, j'avoue avoir eu la flemme en postant la dernière fois

:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
"use strict";
const STORAGE = window.localStorage;
const STORE_PREFIX = "JEU_";
const DATA_REF = ["suspect", "arme", "lieu"];
 
function saveState(name) {
  const elements = document.querySelectorAll(`[name="${name}"]:checked`);
  const storeKey = STORE_PREFIX + name;
  const storeValues = JSON.parse(STORAGE.getItem(storeKey)) || [];
  elements.forEach((el) => {
    storeValues.push(el.value);
  });
  STORAGE.setItem(storeKey, JSON.stringify(storeValues));
}
 
function restoreState(name) {
  const elements = document.querySelectorAll(`[name="${name}"]`);
  const storeKey = STORE_PREFIX + name;
  const storeValues = JSON.parse(STORAGE.getItem(storeKey)) || [];
  elements.forEach((el) => {
    el.disabled = el.value && storeValues.includes(el.value);
  });
}
 
function undoState(name) {
  const elements = document.querySelectorAll(`[name="${name}"]`);
  const storeKey = STORE_PREFIX + name;
  const storeValues = JSON.parse(STORAGE.getItem(storeKey)) || [];
  storeValues.pop();
  elements.forEach((el) => {
    el.checked = false;
    el.disabled = el.value && storeValues.includes(el.value);
  });
  STORAGE.setItem(storeKey, JSON.stringify(storeValues));
}
 
function removeStorage(name) {
  const storeKey = STORE_PREFIX + name;
  STORAGE.removeItem(storeKey);
}
 
function deleteStorage() {
  DATA_REF.forEach((name) => {
    removeStorage(name);
    document.querySelectorAll(`[name="${name}"]`).forEach((el) => {
      el.disabled = false;
    })
  });
}
// init événements
for (const form of document.forms) {
  const storeName = form.dataset.ref;
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const btn = e.submitter;
    const action = btn.dataset["role"];
    switch (action) {
      case "valider":
        saveState(storeName);
        restoreState(storeName);
        break;
      case "undo":
        undoState(storeName);
        break;
      case "delete":
        removeStorage(storeName);
        document.querySelectorAll(`[name="${storeName}"]`).forEach((el) => {
          el.disabled = false;
        });
        break;
      default:
    }
  });
}
// différe l'affichage des sélections pour visualiser
setTimeout(() => {
  DATA_REF.forEach((name) => restoreState(name));
}, 500);

Il n'y a pas de commentaire mais il me semble simple à comprendre.

**chris830** · 24/10/2024, 14h30

Effectivement, il n'est pas tres compliqué à comprendre et en adaptant je suis arrivé a ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
document.querySelectorAll(".submit").forEach(element =>{
	element.addEventListener("submit",saveCheck)
})
//sur mes bouton submit
function saveCheck(){
	const checks = document.querySelectorAll("#formP input[name=img]:checked");
	const checkKey = 'checked';
	const checkValues = JSON.parse(localStorage.getItem(checkKey)) || [];
	checks.forEach((el)=>{
		checkValues.push(el.value);
	});
	localStorage.setItem(checkKey, JSON.stringify(checkValues));
}
 
document.querySelectorAll(".myCheckbox").forEach(element => {
	element.addEventListener('click', checkOnly)
})
//sur mes checkbox
function checkOnly(event) {
 
	if (event.target.checked) {
		document.querySelectorAll(".myCheckbox:checked").forEach(checkbox => {
			if (checkbox !== event.target) {
				checkbox.checked = false;
			}
		});
	}
}
window.addEventListener('load', () => {
	const checked = JSON.parse(localStorage.getItem('checked') || '[]');
	const checks = document.querySelectorAll('#formP input[name=img]');
	checked.forEach((chk, i) => {
			checks[i].checked = checks[i].disabled = chk;
 
 
	})
});

Le probleme que je rencontre maintenant est que , admettons que je check le bouton cuisine et que finalement je decide de choisir le garage et le soumet, mon LocalStorage stocke bien le garage mais au rechargement de la page c'est la cuisine qui est disabled et ,pour l'instant je seche sur que je dois modifier.

**mathieu** · 24/10/2024, 14h33

affichez le contenu des différentes variables à la validation des choix et lors de rafraichissement de la page.
comme cela vous verrez comment circulent les informations "cuisine" et "garage" et cela vous aidera à voir où il faut faire des modifications.

Sauvegarder les états des boutons radio après soumission

JavaScript

Discussions similaires

Partager

Partager