Discussion :

[stardeus]

Bonjour

Je realise un formulaire dynamique avec une liste déroulante
Il s'agit de mettre en place une liste de choix.
Enfonction du choix des champs apparaissent ou non.
Mon souci est que je peux faire l'apparution du champs mais le label ne fonctionne.

Voila ce que je fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
                  < ! ----------  Javascript----------->
 
 
	    function showField()
		{
		    if(document.formulaire.typeCourrier.value == "Telephone" )
    		{
      			document.formulaire.objetCourrier.style.visibility = "visible";
 
    		}
    		else
     			document.formulaire.objetCourrier.style.visibility = "hidden";
    	}

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
 
    Formulaire 
 
<label for="typeCourrier"> Type de Courrier  :</label>
	<select name="typeCourrier" onChange="showField();"  >
		<option value=""></option>
		<option value="Courrier" >Courrier</option>
		<option value="Mail"> Mail</option>
		<option value="Telephone">Téléphonique</option>					</select> 
	    <br>
	    <br>
 
<label for="mailExpedeur" style="visibility:hidden">   Adresse Mail :</label> <input type="text" name="mailExpediteur" id="mailExpediteur"  style="visibility:hidden"/>  
<label for="objetCourrier" style="visibility:hidden">Objet courrier : </label> <input type="Text" name="objetCourrier" id="objetCourrier"  style="visibility:hidden"/>
<label for="nomCharge" style="visibility:hidden">Nom du chargé de mission</label><input type="Text" name="nomCharge" id="nomCharge"  style="visibility:hidden"/>
<label for="numFiche" style="visibility:hidden"> N° Fiche :</label> <input type="Text" name="numFiche" id="numFiche"  style="visibility:hidden"/>	
 
	<br>
	<br>

D'après ce que j'ai compris : label for est lié à l'input avec un identity "id"
c'est la raison pour laquelle il porte le meme nom.
C'est pour cette raison que je fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 document.formulaire.objetCourrier.style.visibility = "visible";

Je ne vois pas comment je pourrais afficher le label .
Je vous remercie d'avance

Stardeus

[E.Bzz]

Bonjour,
il faudrait que tu donnes un ID aussi à chaque <label>.
Tu pourras les afficher avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('id_label').style.visibility='visible';

A+

[stardeus]

Bonjour

Je te remercie cela fonctionne.
Alors je voudrais savoir à quoi sert le for du label ??
A quel moment puis je utiliser cette propriété? Et quel est son utilité ?

Voila comment je m'y suis pour ceux qui sont interessé

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
	  function showField()
		{
		    if(document.formulaire.typeCourrier.value == "Telephone" )
    		{
 
				document.getElementById('objetCourrier').style.visibility='visible';	
				document.formulaire.objetCourrier.style.visibility = "visible";
 
				document.getElementById('mailExpediteur').style.visibility='hidden';	
				document.formulaire.mailExpediteur.style.visibility = "hidden";	
				document.getElementById('adresseCourrier').style.visibility='visible';	
				document.formulaire.adresseCourrier.style.visibility = "visible";	
				document.getElementById('adresseCourrier').style.visibility='hidden';	
				document.formulaire.adresseCourrier.style.visibility = "hidden";				
				document.getElementById('nomCharge').style.visibility='hidden';	
				document.formulaire.nomCharge.style.visibility = "hidden";	
				document.getElementById('numFiche').style.visibility='hidden';	
				document.formulaire.numFiche.style.visibility = "hidden";
 
    		}
    		else if(document.formulaire.typeCourrier.value == "Mail" )
    			{   
				      //champs visible
      			   document.getElementById('mailExpediteur').style.visibility='visible';	
				   document.formulaire.mailExpediteur.style.visibility = "visible";	
 
				   document.getElementById('objetCourrier').style.visibility='visible';
				   document.formulaire.objetCourrier.style.visibility = "visible";		
 
				   document.getElementById('nomCharge').style.visibility='visible';	
				   document.formulaire.nomCharge.style.visibility = "visible";	
 
				   document.getElementById('numFiche').style.visibility='visible';	
				   document.formulaire.numFiche.style.visibility = "visible";	 
				     //champs invisible 
				   document.getElementById('adresseCourrier').style.visibility='hidden';	
				   document.formulaire.adresseCourrier.style.visibility = "hidden";	
 
		   		}

Je ne sais pas si c'est la meilleure façon de le faire mais bon ça fonctionne.
Si vous avez une autre solution qui puisse etre meilleure que celle ci je suis preneur

Merci E.Bzz

[E.Bzz]

En fait, le label associé à un input text ou un select, je vois pas trop

Pour illustrer, associe le à une checkbox (ou un radio) : tu peux la cocher en cliquant sur le texte du label, sans avoir à "viser" la checkbox elle-même (ce qui est le cas sans label) ...

A+

EDIT : mais y a peut-être des utilisations que je connais pas, associé à d'autres type d'input ....

[stardeus]

ok merci
j'avais rien compris à son fonctionnement
tu viens de m'eclairer
thanks