formulaire dynamique avec Label For

Version imprimable

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:

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:

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:

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

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

Stardeus

03/05/2007, 11h55
E.Bzz

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

Code:

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

A+

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:

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

03/05/2007, 13h37
E.Bzz

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

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 ....
03/05/2007, 13h39
stardeus

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