Attribuer localStorage pour qu'un radio soit disabled

[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.
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

[webmaster]

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;
}

[Chris830]

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

[Chris830]

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

[danisaa]

Vous pouvez utiliser tunnel rush unblocked JavaScript pour désactiver les boutons radio en fonction de la valeur précédemment sélectionnée.

[ColeHarry]

Cela vous aidera à empêcher la sélection d'un bouton radio précédemment choisi lorsque vous revenez à la page de sélection escape road