Forums Tout JavaScript

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.
mon form:

Code : Tout sélectionner

<form action="#" th:action="@{/piece}" modelAttribute="piece"  method="post"
	 id="formP" onsubmit="">
		<tr th:each="piece: ${pieces}">
			<input type="submit" name="submit" value="${piece.nom}" th:value="'Valider : '+ ${piece.nom}"
			 onclick="saveform()"  />
			<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 recuperer le choix dans le local strorage:

Code : Tout sélectionner

function check() {
	var btnPieceSub = document.getElementsByName('submit');
	var btnPieceRad = document.getElementsByName('img');
	for (i = 0; i < btnPieceRad.length; i++) {
		if ((btnPieceRad[i].checked)) {
			var valeur = btnPieceRad[i].value;
			localStorage.setItem(valeur, valeur);
		}
	}
}

Et ensuite... c'est le drame.

Je ne sais pas comment faire ma fonction pour qu'une fois de retour sur ma page de choix, mon choix precedent (localeStorage) ne soit plus cochable
J'ai essayé ca:

Code : Tout sélectionner

function saveform() {
	var ls = localStorage.getItem(valeur);
	ls.getElementsByTagName('radio').disabled = true;
}

mais ca ne fonctionne pas...
Merci de votre aide

Bonjour

Je ne suis pas convaincu que le stockage de la case cochée fonctionne bien dans le localStorage.
Il faut donner un nom à la valeur stockée

Code : Tout sélectionner

localStorage.setItem("numBouton", valeur);

Et ensuite, il faut desactiver l'élément radio situé à la position numBouton avec un acces au tableau des radios :

Code : Tout sélectionner

function saveform() {
	var numBouton = localStorage.getItem("numBouton");
	ls.getElementsByTagName('radio')[numBouton].disabled = true;
}

Bonjour,

Ca ne fonctionne pas, je vais essayer de ne mettre qu'un bouton submit pour mon formulaire(au lieu d'un par choix) , peut-etre cela changera quelque chose. Par contre j'ai mis un "alert" dans ma fonction saveform et ca ne déclenche pas et j'ai un message d'erreur furtif dans la console "Uncaught" sur cette ligne:

Code : Tout sélectionner

ls.getElementsByTagName('radio')[radPiece].disabled = true;

Merci de votre aide

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

Code : Tout sélectionner

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...
A suivre
Merci

J'ai le même problème, merci pour les solutions.slope rider

Chris830 a écrit : ↑
28 sept. 2024, 18:03
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.
mon form:
Code : Tout sélectionner
<form action="#" th:action="@{/piece}" modelAttribute="piece"  method="post"
	 id="formP" onsubmit="">
		<tr th:each="piece: ${pieces}">
			<input type="submit" name="submit" value="${piece.nom}" th:value="'Valider : '+ ${piece.nom}"
			 onclick="saveform()"  />
			<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 recuperer le choix dans le local strorage:
Code : Tout sélectionner
function check() {
	var btnPieceSub = document.getElementsByName('submit');
	var btnPieceRad = document.getElementsByName('img');
	for (i = 0; i < btnPieceRad.length; i++) {
		if ((btnPieceRad[i].checked)) {
			var valeur = btnPieceRad[i].value;
			localStorage.setItem(valeur, valeur);
		}
	}
}
Et ensuite... c'est le drame. Je ne sais pas comment faire ma fonction pour qu'une fois de retour sur ma page de choix, mon choix precedent (localeStorage) ne soit plus cochable
J'ai essayé ca:
Code : Tout sélectionner
function saveform() {
	var ls = localStorage.getItem(valeur);
	ls.getElementsByTagName('radio').disabled = true;
}
mais ca ne fonctionne pas...
Merci de votre aide Pokepath TD

This means the solution cannot rely on JavaScript alone; it requires a combination of backend state persistence (session, database, or model attributes) and frontend logic (HTML attributes like checked/disabled, possibly enhanced with JS).

Is there a way to store the user's selection more securely,slope game such as using sessions or a database, instead of just relying on localStorage?

Forums Tout JavaScript

Attribuer localStorage pour qu'un radio soit disabled

Attribuer localStorage pour qu'un radio soit disabled

Re: Attribuer localStorage pour qu'un radio soit disabled

Re: Attribuer localStorage pour qu'un radio soit disabled

Re: Attribuer localStorage pour qu'un radio soit disabled

Re: Attribuer localStorage pour qu'un radio soit disabled

Re: Attribuer localStorage pour qu'un radio soit disabled

Re: Attribuer localStorage pour qu'un radio soit disabled