Discussion :

[chris830]

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]

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]

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]

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 :

• Window.localStorage
• Window.sessionStorage

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

[chris830]

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]

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]

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 !?!