Apparition / disparition de paramètres dans un formulaire [Résolu/Fermé]

Signaler
-
Messages postés
4270
Date d'inscription
samedi 8 septembre 2007
Statut
Membre
Dernière intervention
4 mars 2021
-
Bonjour,

alors je vous explique j'ai un formulaire en html et j'aimerai que quand je choisi 4 ou plus paramètres ( +4 checkbox ) il me soit impossible de cocher un autre paramètre ( bouton radio cette fois-ci). Si vous avez une solution en javaScript ou en php je suis preneur merci !

2 réponses

Messages postés
4270
Date d'inscription
samedi 8 septembre 2007
Statut
Membre
Dernière intervention
4 mars 2021
211
Salut,

Ca se fera en javasript et non en php (pour un traitement dynamique).

Ensuite, il faudra que tu donne ton code pour qu on t aide plus spécifiquement.

naga
<form id="cool" method="post" action="choixSequence.php">
<legend> Paramètres séquence vidéo : </legend>
<p>
Cochez les émotions que vous voulez déclencher :<br />
<input type="checkbox" name="engagement" id="engagement" /> <label for="engagement"> Engagement </label>
<input type="checkbox" name="excitation" id="excitation" /> <label for="excitation"> Excitation </label>
<input type="checkbox" name="interet" id="interet" /> <label for="interet"> Intérêt </label><br />
<input type="checkbox" name="relaxation" id="relaxation" /> <label for="relaxation"> Relaxation </label>
<input type="checkbox" name="stress" id="stress" /> <label for="stress"> Stress </label>
<input type="checkbox" name="focus" id="focus" /> <label for="focus"> Focus </label>

Nombres de secondes :<br />
<input type="radio" name="sec" id="trente" checked /> <label for="trente"> 30 </label>
<input type="radio" name="sec" id="soixante" /> <label for="soixante"> 60 </label>
<input type="radio" name="sec" id="quatrev" /> <label for="quatrev"> 90 </label>

Nombres d'images :<br />
<input type="radio" name="img" id="trois" checked /> <label for="trois"> 3 </label>
<input type="radio" name="img" id="six" /> <label for="six"> 6 </label>
<input type="radio" name="img" id="dix" /> <label for="dix"> 10 </label>

<input id="tresf" type="submit" name="envoi" value=" Envoyer ">
</p>
</form>


Alors voilà quand 4 checkbox ou plus sont coché il faudrait que le bouton radio "3" ( nombres d'images ) ne soit plus sélectionnable. Merci de ton aide
Messages postés
4270
Date d'inscription
samedi 8 septembre 2007
Statut
Membre
Dernière intervention
4 mars 2021
211
re.

Pense à baliser ton code grace aux balises
<code> et 
</code>

Dans le principe voila ta trame :

<script>
function fieldValidation(){
	var iNbChk = 0;
	iNbChk += ( document.getElementById('engagement').checked  ? 1 : 0) ; 
	iNbChk += ( document.getElementById('excitation').checked  ? 1 : 0) ; 
	iNbChk += ( document.getElementById('interet').checked  ? 1 : 0) ; 
	iNbChk += ( document.getElementById('relaxation').checked  ? 1 : 0) ; 
	iNbChk += ( document.getElementById('stress').checked  ? 1 : 0) ; 
	iNbChk += ( document.getElementById('focus').checked  ? 1 : 0) ; 
	if( iNbChk > 3) {
		document.getElementById('trois').type="hidden";
		document.getElementById('lb_trois').style.visibility='hidden';
		if(document.getElementById('trois').checked) {
			document.getElementById('trois').checked=false;
			document.getElementById('six').checked=true;
		}
	} else {
		document.getElementById('trois').type="radio";
		document.getElementById('lb_trois').style.visibility='visible';
	}
	
}

</script>
<form id="cool" method="post" action="res.php"> 
<legend> Paramètres séquence vidéo : </legend> 
<p> 
Cochez les émotions que vous voulez déclencher :<br /> 
<input type="checkbox" name="engagement" id="engagement" onclick="fieldValidation()" /> <label for="engagement"> Engagement </label> 
<input type="checkbox" name="excitation" id="excitation"  onclick="fieldValidation()"  /> <label for="excitation"> Excitation </label> 
<input type="checkbox" name="interet" id="interet"  onclick="fieldValidation()"  /> <label for="interet"> Intérêt </label><br /> 
<input type="checkbox" name="relaxation" id="relaxation"  onclick="fieldValidation()" /> <label for="relaxation"> Relaxation </label> 
<input type="checkbox" name="stress" id="stress"  onclick="fieldValidation()" /> <label for="stress"> Stress </label> 
<input type="checkbox" name="focus" id="focus"  onclick="fieldValidation()" /> <label for="focus"> Focus </label> 
<br /> 
Nombres de secondes :<br /> 
<input type="radio" name="sec" id="trente" checked /> <label for="trente"> 30 </label> 
<input type="radio" name="sec" id="soixante" /> <label for="soixante"> 60 </label> 
<input type="radio" name="sec" id="quatrev" /> <label for="quatrev"> 90 </label> 
<br /> 
Nombres d'images :<br /> 
<input type="radio" name="img" id="trois" checked /> <label for="trois" id="lb_trois"> 3 </label> 
<input type="radio" name="img" id="six" /> <label for="six"> 6 </label> 
<input type="radio" name="img" id="dix" /> <label for="dix"> 10 </label>

<input id="tresf" type="submit" name="envoi" value=" Envoyer "> 
</p> 
</form> 



On assigne au click d un check l appel de la fonction de validation de champ. On compte le nombre de check et en fonction du résultat on gère le nombre d image.

Dans l exemple que je te donne, si j ai plus de 3 cases cochées:
- Si la case 3 est selectionnée, je déselection pour prendre 6 à la place
- je cache le radio btn

Si j ai 3 cases ou moins de coché :
- J affiche le radio btn (dans mon cas j ai pas modifié celui sélectionné, à toi de voir ce que tu veux faire)


Tu remarquera aussi que j ai rajouté au label de 3 un id:

 <label for="trois" id="lb_trois"> 3 </label> 


Car ca me permet d y accéder facilement en javascript pour le cacher en même temps que le radio.

naga
>
Messages postés
4270
Date d'inscription
samedi 8 septembre 2007
Statut
Membre
Dernière intervention
4 mars 2021

Re,

merci beaucoup ça marche ! C'est la première fois que je demande de l'aide sur ce site je ne connaissais pas les balises <code> désolé. Oui j'ai bien compris tes explications (je débute dans la programmation web).

Encore merci bonne soirée !
Messages postés
4270
Date d'inscription
samedi 8 septembre 2007
Statut
Membre
Dernière intervention
4 mars 2021
211
Pas de soucis bon dev;)

Naga