Création de champ dynamique dans un formulaire

Version imprimable

Bonjour à tous,
j'ai une petite question à vous poser.
J'ai un formulaire avec 3 radio boutons et je voudrais faire apparaitre des champs supplémentaire à remplir si l'utilisateur clique sur un radio bouton précis.

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
 
	<form id="formulaire" name="formulaire" method="post" action="">
      <table cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td><label>J'assisterai &agrave; la conf&eacute;rence :</label></td>
        <td>
        <label><input type="radio" name="reponse[]" value="0"/>Oui</label>
	    <br />
		<label><input type="radio" name="reponse[]" value="1"/>Non</label>	  
	    <br />
  	    <label><input type="radio" name="reponse[]" value="2"/>
  	    Non mais serai repr&eacute;sent&eacute; par <br /> 
		<input type="text" name="representant" value="" size="40" maxlength="30"/>
  	    </label>
		</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><em><span class="Style1">*</span><span class="Style2">champs  obligatoires</span></em></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>
			<input type="submit" name="submit" value="Valider votre inscription" />
          	<input type="reset" name="reset" value="Effacer" />		</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    </form>

En gros, je voudrais que le input representant apparaissent seulement et seulement si l'utilisateur clique sur le radio bouton 2...

Une idée?

13/04/2006, 09h53
alex75

personne?
13/04/2006, 10h09
denisC

Re: Création de champ dynamique dans un formulaire

Citation:

Envoyé par alex75

Une idée?

DOM dans la :faq:

Voici une petite solution :)

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
 
<script type="text/javascript"> 
 
 
function declic(bouton, champ)
{ 
	if (bouton.checked && bouton.value == 2) 
	{ 
		alert("afficher");
		champ.style.display = "inline";
    	//document.getElementById('adresse').style.display="display"; 
		//document.getElementById(champ2).style.display="none"; 
   	} 
	else 
	{ 
		alert("supprimer");
    	champ.style.display="none"; 
		//document.getElementById(champ2).style.display="display"; 
   } 
} 
 
 
</script> 
</head>
 
<body>
 
 
 
 
 
 
 
<form id="form" action=""> 
 
<table>
      <tr>
        <td><label>J'assisterai &agrave; la conf&eacute;rence<span class="Style1">*</span> :</label></td>
        <td>
        <label><input type="radio" name="reponse[]" value="0" id="chkb_10" onclick="declic(this, document.getElementById('adresse'))" />Oui</label>
	    <br />
		<label><input type="radio" name="reponse[]" value="1" id="chkb_10" onclick="declic(this, document.getElementById('adresse'))" />Non</label>	  
	    <br />
  	    <label><input type="radio" name="reponse[]" value="2" id="chkb_10" onclick="declic(this, document.getElementById('adresse'))" /> Non mais serai repr&eacute;sent&eacute; par</label>
		</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
		<td>
		<input type="text" id="adresse" style="display:none" name="representant" value="" size="40" maxlength="30" /> 
		</td>
      </tr>
	 </table>
 
 
 
</form> 
 
 
</body>
</html>