Comment griser une case en HTML

Fermé
ekatte - 7 janv. 2009 à 14:18
 ekatte - 13 janv. 2009 à 13:43
Bonjour,

J'ai un probleme en html !
J'ai créée un menu déroulant qui donne tout les barreaux du Nord concernés et une zone de texte pour des personnes venant d'autres barreaux, bref !

J'aimerais pouvoir faire en sorte que la personne utilisant le formulaire ne puisse choisir que l'une des 2 options:

Voila mon bout de code:

<BR>Barreau : <BR>
<SELECT><OPTION></OPTION>
<OPTION>Valenciennes</OPTION>
<OPTION>Lille</OPTION>
<OPTION>Cambrai</OPTION>
<OPTION>Douai</OPTION>
<OPTION>Péronne</OPTION>
<OPTION>Arras</OPTION>
<OPTION>Saint-Quentin</OPTION>
<OPTION>Avesnes-sur-Helpe</OPTION>
</SELECT>
<INPUT TYPE="radio" NAME="radiobutton" VALUE="Autre">
Autre, précisez : <INPUT TYPE="text" NAME="texte" SIZE="10"<BR>

J'aimerais pouvoir griser la partie "Autre, précisez" si l'utilisateur choisit le menu deroulant, inversement, j'aimerais que l'utilisateur ne puisse pas ecrire ds la partie "Autre, précisez" si il choisit une des villes proposées.

Est-ce quelqu'un pourrait m'aider ?

Merci a tous d'avance !

Emma
A voir également:

4 réponses

artragis Messages postés 481 Date d'inscription mardi 12 juin 2007 Statut Membre Dernière intervention 6 avril 2010 146
7 janv. 2009 à 16:11
il faudrait utiliser un javascript (attention comme ça fait longtemps que j'en ai pas fait, il faudra que quelqu'un conforme ma réponse)

à mettre entre les balises <head> et </head>
<script language="javascript">
/*On va d'abbord vérifier si on a selectionné un élément du menu déroulant, de là on va déterminer si la textebox devra ou non être grisée*/
function option_selectionnee(){
  if(Valanciennes.selected || Lille.selected || Cambrai.selected || Douai.selected || Péronne.selected || Arras.selected   || Saint-Quentin.selected || Avesnes-sur-Helpes.selected){
     var champ_autre_actif = true;
  }
  else {
     var champ_autre_actif = false;
  }
 
return champ_autre_actif
}
/*Cette fonction est simple, elle utilise la valeur renvoyée par la fonction option_selectionnee 
puis elle regarde la valeur. si c'est vrai alors on grise, sinon on laisse comme ça.*/
function griser (){
if(champ_autre_actif=true){
 radiobutton.enable=false;
 texte.enable=false;
}
}


Ensuite à mettre dans le code html
<BR>Barreau : <BR>
<SELECT onclick="griser()"><OPTION></OPTION>
<OPTION>Valenciennes</OPTION>
<OPTION>Lille</OPTION>
<OPTION>Cambrai</OPTION>
<OPTION>Douai</OPTION>
<OPTION>Péronne</OPTION>
<OPTION>Arras</OPTION>
<OPTION>Saint-Quentin</OPTION>
<OPTION>Avesnes-sur-Helpe</OPTION>
</SELECT> 


Comme je te l'ai dit, jen e sais pas si c'est bon, pour ma part je n'ai jamais fait un script pour cette fonction là, je risque d'avoir fait de grosses erreurs (sinon, alors c'est parfait non?) et quelqu'un risque de dire la bonne réponse sous peu.

Par contre, je tiens à te le dire, il ne sert à rien de relancer un message au bout d'une demie heure, ça ne change rien, qui plus est ça fait même croire que quelqu'un t'a répondu
1
Bonjour artragis,

Merci pour ta réponse ! (par contre c'est bizarre, la page est coupée et je ne vois pas tout ce que tu as écris ! o.O
Oui je suis désolée d'avoir relancée si vite, c'était juste pour que mon message ne tombe pas ds l'oublie ^^

Sinon j'ai essayée ton bout de code mais malheueusement ca ne marche pas...
Mais j'ai compris le principe et je vais essayer de le retravailler maintenant, encore merci de ton aide !!
1
Ca y est j'ai trouvée la solution:

<script language="javascript">

/* création d'une fonction concernant le menu déroulant du barreau */

function choix_barreau()
{
if (Valenciennes.selected || Lille.selected || Cambrai.selected || Douai.selected || Péronne.selected ||
Arras.selected || Saint-Quentin.selected || Havesnes-sur-Helpes.selected)
{
var champ_barreau_autre=true; /*si l'une de ces villes est sélectionnée, alors la variable prend vrai */
}
else
{
var champ_barreau_autre=false; /* sinon la variable prend faux */
}
return champ_barreau_autre;
}


/* création d'une fonction "grisant" la partie "Autre, précisez" */

function griser_barreau()
{
if (champ_barreau_autre=true)
{
document.getElementById('radiobutton').disabled=true; /* si la variable à la valeur vrai, le boutton
ne peut être sélectionné */
document.formulaire.barreau_autre.disabled=true; /* et la partie "texte" n'est pas activée */
}
}
</script>

et au niveau du menu déroulant j'ai mis:

<SELECT onchange="griser_barreau()">
<OPTION>******</OPTION>
<OPTION>******</OPTION>
</SELECT>
<INPUT TYPE="radio" ID="radiobutton" VALUE="Autre" SIZE="20">

En fait il faut mettre ONCHANGE et non pas ONCLICK.
Petite info pour ceux qui comme mua cherchée comment griser une case en html, le ONCHANGE s'active des qu'il y a un changement d'état alors que le ONCLICK est plus approprié pour un bouton.

Merci artragis pour t'on aide !

Par contre cette méthode n'est pas parfaite puisque dans ce cas précis, il n'y a qu'un bouton radio, mais avec plusieurs (comme j'ai un peu plus loin dans mon programme) on peut quand meme appuyer sur les autres boutons radios, hormis celui grisé (avec la case texte a coté)
Autre petit probleme, une fois la case grisée, impossible de changer l'état de la dites case a moins de rafraichir la page.......>.<

Je cherche !
0
Personne ?
0
artragis Messages postés 481 Date d'inscription mardi 12 juin 2007 Statut Membre Dernière intervention 6 avril 2010 146
9 janv. 2009 à 18:23
il suffit alors d'utiliser getElementbyId("id de ton radiobutton") ça suffira.
Sinon, de rien, je savais que c'était dans ces eaux là, mais pour moi JS ça fait un baille !
0
Pour le problème de la sélection de plusieurs boutons radios j'ai trouvée mon problème: j'avais oubliée ou mis en trop (je ne me rappelle plus exactement ! ^^' ) un
"onchange="griser_barreau()"


Par contre toujours pas trouvée de solution en ce qui concerne l'accès a la case "grisée" si elle a eu le malheur de l'être !! ;p


J'ai aussi un autre petit problème....si quelqu'un aurait la gentillesse de m'aider !^^
Le voici: Dans mon formulaire, si l'utilisateur ne saisit pas de code postal, la page lui demande d'en saisir un, malheureusement une fois le code postal saisit, la page continue toujours d'afficher "Veuillez entre votre CP" !
Comme je n'ai pas pris en compte l'option d'un 2eme code postal j'aimerais qu'il se contente de celui ci !! =)

Voila le bout de mon code concernant le problème:

dans la page html ==>

<BR><I><ul>Code Postal : </ul></I><BR><INPUT TYPE="text" NAME="CodePostal" ID="codePostal_1" SIZE="1" maxlength="1" onKeyUp="passer_case_suivante(this,'codePostal_2', 1)">
																<INPUT TYPE="text" NAME="CodePostal" ID="codePostal_2" SIZE="1" maxlength="1" onKeyUp="passer_case_suivante(this,'codePostal_3', 1)">
																<INPUT TYPE="text" NAME="CodePostal" ID="codePostal_3" SIZE="1" maxlength="1" onKeyUp="passer_case_suivante(this,'codePostal_4', 1)">
																<INPUT TYPE="text" NAME="CodePostal"  ID="codePostal_4" SIZE="1" maxlength="1" onKeyUp="passer_case_suivante(this,'codePostal_5', 1)">
																<INPUT TYPE="text" NAME="CodePostal" ID="codePostal_5" SIZE="1" maxlength="1"><BR>


dans la page php ==>
 if(empty($_GET['codePostal']))
		{
			echo $info="Veuillez entrer votre code postal, svp.";
		}
                                else 
                                {
                                                echo "Code Postal : ", $_GET['codePostal'], "<BR>";
		
	                }


J"ai essayée plusieurs solutions en vain !!
Je ne vois pas du tout ou est mon erreur...

Je vous remercie d'avance pour l'attention que vous portez a mon problème !!
0