Ajouter ou supprimer un champ de formulaire en fonction d'un menu déroulant

**pasc06** · 17/02/2009, 23h05

Bonjour

Je galère depuis des heures sur ce problème...

Dans mon formulaire d'inscription, l'utilisateur doit saisir son sexe à l'aide d'un menu déroulant, et je voudrais que :

- Si c'est une femme, le champ 'poitrine' apparaisse pour qu'elle puisse saisir sa poitrine

- Si c'est un homme, le champ 'poitrine' disparaisse

- Que par défaut, à l'arrivée sur la page, le champ 'poitrine' soit apparent

Pour l'instant à l'arrivée le champ n'est pas apparent, tout est ok.
Il apparait quand on choisit 'femme' dans le menu déroulant,
mais impossible de le faire disparaître quand on choisit 'homme'...

Autre bizarrerie : Dans le javascript, le champ 'poitrine' n'apparait que si je mets 'if ( choix == 0)', alors que je devrais mettre 'if ( choix == 1)'. Si je mets 'if ( choix == 1)', le champ 'poitrine' n'apparait plus quand on choisit 'femme' dans le menu déroulant...

Voici la partie javascript :

Code :

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

1
2
3
4
5
6
7
8
function champ_poitrine() {
choix = document.getElementById('sexe').value;
 
if ( choix  == 0) // <== ici je devrais mettre 1, mais si je mets 1 rien ne se passe...
{document.getElementById('boob').style.visibility = 'visible';}
 
else {document.getElementById('boob').style.visibility = 'hidden';}
}

Dans l'html pour choisir le sexe:

Code :

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

1
2
3
4
5
6
7
8
9
<select name="sexe" id="sexe" style="width:110px" onChange="champ_poitrine()">
 
<option value="0"<?php if(!isset($_POST['sexe'])) echo ' selected="selected"';?>>choisissez...</option>
 
<option value="1"<?php if((isset($_POST['sexe']))&&(($_POST['sexe'])== 1)) echo ' selected="selected"';?>>Une femme</option>
 
<option value="2"<?php if((isset($_POST['sexe']))&&(($_POST['sexe'])== 2)) echo ' selected="selected"';?>>Un homme</option>
 
</select>

Et enfin dans l'html pour faire apparaitre le champ poitrine :

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
<tr>
<td colspan="2" align="left" class="Style14">
<div id="boob" style="visibility:hidden">
 
<table width="529" height="31" border="0" cellpadding="0" cellspacing="0">
 
  <tr>
      <td width="225" align="left" class="Style14">Ma poitrine</td>
      <td width="304" align="left" class="Style4"><select name="poitrine"  
      id="id_poitrine" style=" width:110px">
 
      <option selected="selected"><?php echo 'choisissez...';?></option>
 
      <option value="75 A"<?php   
      if((isset($_POST['poitrine']))&&(($_POST['poitrine'])== "75 A"))
      echo ' selected="selected"'; ?>>75 A</option>
 
     <option value="75 B"<?php
     if((isset($_POST['poitrine']))&&(($_POST['poitrine'])== "75 B"))
     echo ' selected="selected"';?>>75 B</option>
// etc.., etc...
    </select></td>
  </tr>
</table></div></td>
</tr>

Je précise que je suis débutant...! Essayez d'être explicite svp...!

Merci de votre aide !

**marcha** · 18/02/2009, 09h01

Salut,

je modifierai ainsi:

Code :

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

1
2
3
4
5
6
 
function champ_poitrine() {
  var liste = document.getElementById('sexe');
  var choix = liste.options[liste.selectedIndex].value;
  document.getElementById('boob').style.visibility = (choix==1) ? 'visible' : 'hidden';
}

**pasc06** · 18/02/2009, 09h08

Bonjour et merci pour ta réponse

Je viens d'essayer de remplacer ma fonction par celle que tu m'as indiquée.

A l'arrivée le champ n'est pas apparent, mais maintenant plus rien ne se passe qu'on choisisse 'homme' ou 'femme' dans le menu déroulant...

**marcha** · 18/02/2009, 09h21

Que te donne ceci:

Code :

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

1
2
3
4
5
function champ_poitrine() {
  var liste = document.getElementById('sexe');
  var choix = liste.options[liste.selectedIndex].value;
  alert(choix);
}

**pasc06** · 18/02/2009, 09h26

L'alerte m'affiche '0' pour les 3 options du menu déroulant... Que je choisisse 'Choisissez...', 'femme', ou 'homme'...

C'est ce que je disais dans l'énoncé du problème je ne comprends pas pourquoi...

Car si je valide le formulaire après avoir saisi 'femme', j'ai bien la valeur '1' dans la base de données.

**marcha** · 18/02/2009, 09h41

Peux tu donner le code html généré stp ?

**marcha** · 18/02/2009, 09h49

la page complète, mais tu peux épurer ce qui est sans intérêt.

**pasc06** · 18/02/2009, 11h00

Voici le code ! Je l'ai taillé à la serpe car il est très long, alors il est possible qu'il y ait des balises manquantes ! J'espère cependant que l'origine du problème a été conservé...

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
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<!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=utf-8" />
 
<title></title>
 
<link href="styles.css" media="all" rel="stylesheet" type="text/css" />
<script type="text/javascript">
 
function getXhr(){
var xhr = null; 
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest(); 
else if(window.ActiveXObject){ // Internet Explorer 
	try {
	    xhr = new ActiveXObject("Msxml2.XMLHTTP");
	    } 
	catch (e) {
	     		xhr = new ActiveXObject("Microsoft.XMLHTTP");
			  }
}
	else { // XMLHttpRequest non supporté par le navigateur 
		   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		   xhr = false; 
		} 
return xhr;
}
 
function go_regions_der(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function()
{
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
	leselect = xhr.responseText;
	// On se sert de innerHTML pour rajouter les options a la liste
	document.getElementById('id_regions_der').innerHTML = leselect;
	}
}
// Ici on va voir comment faire du post
xhr.open("POST","lister_regions_der2.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id du pays
sel = document.getElementById('id_pays');
				idpays = sel.options[sel.selectedIndex].value;
				xhr.send("id_pays="+idpays);
go_regions();			
}
 
 
// Pour lister les villes de résidence en fonction de la région de résidence
function go(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function()
{
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
	leselect = xhr.responseText;
	// On se sert de innerHTML pour rajouter les options a la liste
	document.getElementById('id_villes').innerHTML = leselect;
	}
}
// Ici on va voir comment faire du post
xhr.open("POST","lister_villes.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id du pays
sel = document.getElementById('id_region_res');
				idregionres = sel.options[sel.selectedIndex].value;
				xhr.send("id_region_res="+idregionres);
 
}
 
 
// Pour lister les régions déroulantes à choix multiples
function go_regions(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function()
{
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
	leselect = xhr.responseText;
	// On se sert de innerHTML pour rajouter les options a la liste
	document.getElementById('id_regions2').innerHTML = leselect;
	}
}
// Ici on va voir comment faire du post
xhr.open("POST","lister_regions.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id du pays
sel = document.getElementById('id_pays');
				idpays = sel.options[sel.selectedIndex].value;
				xhr.send("id_pays="+idpays);
}
 
// Pour lister les régions déroulantes du menu recherche
function go2(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function()
{
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
	leselect = xhr.responseText;
	// On se sert de innerHTML pour rajouter les options a la liste
	document.getElementById('id_regions').innerHTML = leselect;
	}
}
// Ici on va voir comment faire du post
xhr.open("POST","lister_regions_der.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id du pays
sel = document.getElementById('id_pays2');
				idpays2 = sel.options[sel.selectedIndex].value;
				xhr.send("id_pays2="+idpays2);
 
}
 
//function champ_poitrine() {
 
//	choix = document.getElementById('sexe').value;
 
//	if (document.getElementById('sexe').value==0) document.getElementById('boob').style.visibility = 'visible';
//		document.getElementById('boob').style.display= 'bloc'; 
//	else document.getElementById('boob').style.visibility = 'hidden'; 
//		document.getElementById('boob').style.display= 'none'; 
//}
 
//function champ_poitrine() {
//  var liste = document.getElementById('sexe');
//  var choix = liste.options[liste.selectedIndex].value;
//  document.getElementById('boob').style.visibility = (choix==1) ? 'visible' : 'hidden';
//}
 
function champ_poitrine() {
  var liste = document.getElementById('sexe');
  var choix = liste.options[liste.selectedIndex].value;
  alert(choix);
}
 
</script>
 
</head>
 
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
  <table width="1000" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="1000" colspan="2" valign="top" bgcolor="#282828"><img src="images/bandeau.gif" width="1000" height="120" /></td>
          <td width="640" valign="top" bgcolor="#000000"><table width="639" height="158" border="0" cellpadding="0" cellspacing="0" background="images/bandeau_sous_menu.gif" style="background-repeat: no-repeat;">
            <tr>
              <td height="70" align="center" class="Style12">Bienvenue !</td>
            </tr>
            <tr>
              <td height="79" align="center">
             <br />
            <div align="left" class="Style15">Ma description :</div>
            <table width="529" height="479" border="0" cellpadding="5" cellspacing="0">
              <tr>
                <td width="210" align="left" class="Style14">Je suis</td>
                <td width="299" align="left" class="Style4"><select name="sexe" id="sexe" style="font-family:
                Verdana, Arial, Helvetica, sans-serif; font-weight:lighter; color:#000000; font-size:11px; border-width:1px; 
                border-color:#666666; border-style: solid; background-color:#999999; width:110px" onChange="champ_poitrine()">
                    <option value="0" selected="selected">choisissez...</option>
                    <option value="1">
                    Une femme</option>
                    <option value="2">Un homme</option>
 
                  </select>
                </td>
              </tr>
              <tr>
                <td colspan="2" align="left" class="Style14"><div id="boob" style="visibility:hidden"><table width=
                "529" height="31" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="225" align="left" class="Style14">Ma poitrine</td>
 
                    <td width="304" align="left" class="Style4"><select name="poitrine" id="id_poitrine" style="font-family:Verdana, 
                    Arial, Helvetica, sans-serif; font-weight:lighter; color:#000000; font-size:11px; border-width:1px;
                    border-color:#666666; border-style:solid; background-color:#999999; width:110px">
                        <option selected="selected">choisissez...</option>
                        <option value="75 A">75 A</option>
                        <option value="75 B">75 B</option>
                        <option value="75 C">75 C</option>
                        <option value="75 D">75 D</option>
 
                        <option value="75 E">75 E</option>
                        <option value="75 F">75 F</option>
                        <option value="80 A">80 A</option>
                        <option value="80 B">80 B</option>
                        <option value="80 C">80 C</option>
                        <option value="80 D">80 D</option>
 
                        <option value="80 E">80 E</option>
                        <option value="80 F">80 F</option>
                        <option value="85 A">85 A</option>
                        <option value="85 B">85 B</option>
                        <option value="85 C">85 C</option>
                        <option value="85 D">85 D</option>
 
                        <option value="85 E">85 E</option>
                        <option value="85 F">85 F</option>
                        <option value="90 A">90 A</option>
                        <option value="90 B">90 B</option>
                        <option value="90 C">90 C</option>
                        <option value="90 D">90 D</option>
 
                        <option value="90 E">90 E</option>
                        <option value="90 F">90 F</option>
                        <option value="95 A">95 A</option>
                        <option value="95 B">95 B</option>
                        <option value="95 C">95 C</option>
                        <option value="95 D">95 D</option>
 
                        <option value="95 E">95 E</option>
                        <option value="95 F">95 F</option>
                        <option value="100 A">100 A</option>
                        <option value="100 B">100 B</option>
                        <option value="100 C">100 C</option>
                        <option value="100 D">100 D</option>
 
                        <option value="100 E">100 E</option>
                        <option value="100 F">100 F</option>
                        <option value="105 A">105 A</option>
                        <option value="105 B">105 B</option>
                        <option value="105 C">105 C</option>
                        <option value="105 D">105 D</option>
 
                        <option value="105 E">105 E</option>
                        <option value="105 F">105 F</option>
                        <option value="110 A">110 A</option>
                        <option value="110 B">110 B</option>
                        <option value="110 C">110 C</option>
                        <option value="110 D">110 D</option>
 
                        <option value="110 E">110 E</option>
                        <option value="110 F">110 F</option>
                        <option value="115 A">115 A</option>
                        <option value="115 B">115 B</option>
                        <option value="115 C">115 C</option>
                        <option value="115 D">115 D</option>
 
                        <option value="115 E">115 E</option>
                        <option value="115 F">115 F</option>
                    </select></td>
                  </tr>
                </table></div></td>
                </tr>
            </table>        
            </form></td>
                  <td width="54">&nbsp;</td>
                </tr>
              </table></td>
            </tr>
 
          </table></td>
          <td width="180" valign="top" background="images/bandeau_droit.gif" bgcolor="#282828"><table width="179" border="0" 
            cellspacing="3" cellpadding="0">
            <tr>
              <td></td>
            </tr>
            <tr>
              <td></td>
            </tr>
            <tr>
 
              <td height="19" align="center">&nbsp;</td>
            </tr>
            <tr>
              <td height="140" align="center">&nbsp;</td>
            </tr>
            <tr>
              <td height="19" align="center">&nbsp;</td>
            </tr>
            <tr>
 
              <td height="19" align="center">&nbsp;</td>
            </tr>
            <tr>
              <td height="140" align="center">&nbsp;</td>
            </tr>
            <tr>
              <td height="21" align="center">&nbsp;</td>
            </tr>
          </table></td>
 
        </tr>
 		<tr>
          <td style="border-top:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC;">&nbsp;</td>
 		  <td style="border-top:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC;" align="center" class="Style7">© 2009 Tous droits réservés | <a href="legals.php">Condition générales</a> |</td>
 		  <td style="border-top:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC;">&nbsp;</td>
 		  </tr>
 
      </table></td>
 
    </tr>
    <tr>
      <td height="20">&nbsp;</td>
    </tr>
  </table>
</center>
</body>
</html>

**marcha** · 18/02/2009, 11h50

Envoyé par pasc06

J'espère cependant que l'origine du problème a été conservé...

heu... tu me rassure pas là :-) je vais pas me creuser la tête dans ton code
si celui-ci présente "peut-être" le problème :-)

merci de le tester et de me dire si le problème subsiste, d'autre part, passe
le au validateur, on va pas s'amuser à débuguer un code incomplet

après ça je creuse volontiers.

**pasc06** · 18/02/2009, 12h29

J'ai trouvé la solution :

Sur la page complète il y un formulaire de recherche, avec notamment une recherche sur les sexes. Les identifiants sur la partie recherche et sur la partie inscription sont les mêmes. Je pense que l'erreur vient de là. Il doit y avoir conflit entre les 2 id 'sexe'.

C'est pour ça que quand je saisis le sexe sur la partie inscription, celui de la recherche n'a pas été saisi, et est donc égal à '0'. Et c'est malheureusement le premier sur la page et donc celui qui est pris en compte.

Il faut donc modifier le nom d'un des deux identifiants afin qu'il aient des noms différents.

Merci Marcha de m'avoir mis sur la voie aussi vite !

Sans toi j'étais en galère pour un moment !

**pasc06** · 18/02/2009, 13h30

J'ai toutefois une autre question :

Pour l'instant le champ 'poitrine' est un tableau qui est caché à l'arrivée sur le formulaire, et qui s'affiche ou disparait suivant le choix saisi dans le menu déroulant. Ce tableau est intégré dans un 2ème tableau.

J'aimerais toutefois faire autrement.
Au lieu d'avoir le champ 'poitrine' dans le tableau intégré avec une 'visibility hidden' ou 'visible', je préfèrerais qu'une ligne s'ajoute ou se supprime en fin du second tableau, à l'aide des commandes 'display'.

J'ai déjà fait des essais sans succès, ça ne fonctionnait pas. J'ai donc ajouté le tableau 'poitrine' un peu par dépit...

Je remets le code :

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!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=utf-8" />
<title>Document sans nom</title>
 
<script type="text/javascript">
function champ_poitrine() {
  var liste = document.getElementById('sexe');
  var choix = liste.options[liste.selectedIndex].value;
  document.getElementById('boob').style.visibility = (choix==1) ? 'visible' : 'hidden';
}
</script>
</head>
 
<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="530"><form class="formsansautdeligne" id="form1" name="form1" method="post" action=
                  "inscription.php">
      <table width="529" height="479" border="0" cellpadding="5" cellspacing="0">
        <tr>
          <td width="210" align="left" class="Style14">Je suis</td>
          <td width="299" align="left" class="Style4"><select name="sexe" id="sexe" style="width:110px" onchange="champ_poitrine()">
            <option value="0"<?php if(!isset($_POST['sexe'])) echo ' selected="selected"';?>>choisissez...</option>
            <option value="1"<?php if((isset($_POST['sexe']))&&(($_POST['sexe'])== 1)) echo ' selected="selected"';?>>Une femme</option>
            <option value="2"<?php if((isset($_POST['sexe']))&&(($_POST['sexe'])== 2)) echo ' selected="selected"';?>>Un homme</option>
          </select></td>
        </tr>
        <tr>
          <td colspan="2" align="left" class="Style14"><div id="boob" style="visibility:hidden">
            <table width=
                "529" height="31" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="225" align="left" class="Style14">Ma poitrine</td>
                <td width="304" align="left" class="Style4"><select name="poitrine" id="id_poitrine" style="width:110px">
                  <option selected="selected"><?php echo 'choisissez...';?></option>
                  <option value="75 A"<?php
                        if((isset($_POST['poitrine']))&&(($_POST['poitrine'])== "75 A")){ echo ' selected="selected"';  } ?>>75 A</option>
                  <option value="75 B"<?php
                        if((isset($_POST['poitrine']))&&(($_POST['poitrine'])== "75 B")){ echo ' selected="selected"';  } ?>>75 B</option>
// etc, etc
                </select></td>
              </tr>
            </table>
          </div></td>
        </tr>
      </table>
      <div align="left" span="span" class="Style15"></div>
      <table width="530" height="51" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="center"><span class="Style4">
            <input type="submit" name="envoyer" id="envoyer" style="font:10px Verdana, Arial, Helvetica, sans-serif;" value=
                    "Créer votre profil" />
          </span></td>
        </tr>
      </table>
    </form></td>
  </tr>
</table>
</body>
</html>

Merci pour votre aide

**marcha** · 18/02/2009, 13h50

Tu peux essayer de mettre un ID dans le tr de la ligne du tableau prinicpal
et de faire un

Code :

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

document.getElementById('ton_id').style.display = (choix==1) ? 'block' : 'none';

**pasc06** · 18/02/2009, 14h02

J'ai essayé cela, mais ça ne fonctionne pô...

J'ai supprimé le tableau du champ 'poitrine', modifié le javascript en remplaçant les 'hidden' et 'visible', par display 'block' et 'none'. Et enfin j'ai placé le div sur le tr du tableau principal

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!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=utf-8" />
<title>Document sans nom</title>
 
<script type="text/javascript">
function champ_poitrine() {
  var liste = document.getElementById('sexe');
  var choix = liste.options[liste.selectedIndex].value;
  document.getElementById('boob').style.display = (choix==1) ? 'block' : 'none';
}
</script>
</head>
 
<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="530"><form class="formsansautdeligne" id="form1" name="form1" method="post" action=
                  "inscription.php" >
      <table width="529" height="310" border="0" cellpadding="5" cellspacing="0">
        <tr>
          <td width="210" height="29" align="left" class="Style14">Je suis</td>
          <td width="299" align="left" class="Style4"><select name="sexe" id="sexe" style="font-family:
                Verdana, Arial, Helvetica, sans-serif; font-weight:lighter; color:#000000; font-size:11px; border-width:1px; 
                border-color:#666666; border-style: solid; background-color:#999999; width:110px" onchange="champ_poitrine()">
            <option value="0"<?php if(!isset($_POST['sexe'])) echo ' selected="selected"';?>>choisissez...</option>
            <option value="1"<?php if((isset($_POST['sexe']))&&(($_POST['sexe'])== 1)) echo ' selected="selected"';?>>Une femme</option>
            <option value="2"<?php if((isset($_POST['sexe']))&&(($_POST['sexe'])== 2)) echo ' selected="selected"';?>>Un homme</option>
          </select></td>
        </tr>
// Ici j'ai mis le DIV avec le display none sur le tr
        <div id="boob" style="display:none"><tr>
          <td height="29" align="left" class="Style14">Ma poitrine</td>
          <td align="left" class="Style4"><select name="poitrine" id="poitrine" style="font-family:Verdana, 
                    Arial, Helvetica, sans-serif; font-weight:lighter; color:#000000; font-size:11px; border-width:1px;
                    border-color:#666666; border-style:solid; background-color:#999999; width:110px">
            <option selected="selected"><?php echo 'choisissez...';?></option>
            <option value="75 A"<?php
                        if((isset($_POST['poitrine']))&&(($_POST['poitrine'])== "75 A")){ echo ' selected="selected"';  } ?>>75 A</option>
            <option value="75 B"<?php
                        if((isset($_POST['poitrine']))&&(($_POST['poitrine'])== "75 B")){ echo ' selected="selected"';  } ?>>75 B</option>
          </select></td>
        </tr></div>
      </table>
      <div align="left" span="span" class="Style15"></div>
      <table width="530" height="51" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="center"><span class="Style4">
            <input type="submit" name="envoyer" id="envoyer" style="font:10px Verdana, Arial, Helvetica, sans-serif;" value=
                    "Créer votre profil" />
          </span></td>
        </tr>
      </table>
    </form></td>
  </tr>
</table>
</body>
</html>

**marcha** · 18/02/2009, 14h07

Salut,

tu as pas le "droit" de mettre un div autour d'un tr. si tu as des bugs étranges
je commencerai par passer le code au validateur de w3c

**pasc06** · 18/02/2009, 14h14

Ok

J'ai donc retiré le div, et mis l'id dans le tr.

Ca marche mais le champ 'poitrine' (le menu déroulant) apparait décalé sur la gauche, et n'est plus aligné avec le menu déroulant du dessus pour choisir le sexe.

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!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=utf-8" />
<title>Document sans nom</title>
 
<script type="text/javascript">
function champ_poitrine() {
  var liste = document.getElementById('sexe');
  var choix = liste.options[liste.selectedIndex].value;
  document.getElementById('boob').style.display = (choix==1) ? 'block' : 'none';
}
</script>
</head>
 
<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="530"><form class="formsansautdeligne" id="form1" name="form1" method="post" action=
                  "inscription.php">
      <table width="529" height="310" border="0" cellpadding="5" cellspacing="0">
        <tr>
          <td width="210" height="29" align="left" class="Style14">Je suis</td>
          <td width="299" align="left" class="Style4"><select name="sexe" id="sexe" style="font-family:
                Verdana, Arial, Helvetica, sans-serif; font-weight:lighter; color:#000000; font-size:11px; border-width:1px; 
                border-color:#666666; border-style: solid; background-color:#999999; width:110px" onchange="champ_poitrine()">
            <option value="0"<?php if(!isset($_POST['sexe'])) echo ' selected="selected"';?>>choisissez...</option>
            <option value="1"<?php if((isset($_POST['sexe']))&&(($_POST['sexe'])== 1)) echo ' selected="selected"';?>>Une femme</option>
            <option value="2"<?php if((isset($_POST['sexe']))&&(($_POST['sexe'])== 2)) echo ' selected="selected"';?>>Un homme</option>
          </select></td>
        </tr>
        <tr id="boob" style="display:none">
          <td height="29" align="left" class="Style14">Ma poitrine</td>
          <td align="left" class="Style4"><select name="poitrine" id="poitrine" style="font-family:Verdana, 
                    Arial, Helvetica, sans-serif; font-weight:lighter; color:#000000; font-size:11px; border-width:1px;
                    border-color:#666666; border-style:solid; background-color:#999999; width:110px">
            <option selected="selected"><?php echo 'choisissez...';?></option>
            <option value="75 A"<?php
                        if((isset($_POST['poitrine']))&&(($_POST['poitrine'])== "75 A")){ echo ' selected="selected"';  } ?>>75 A</option>
            <option value="75 B"<?php
                        if((isset($_POST['poitrine']))&&(($_POST['poitrine'])== "75 B")){ echo ' selected="selected"';  } ?>>75 B</option>
          </select></td>
        </tr>
      </table>
      <div align="left" span="span" class="Style15"></div>
      <table width="530" height="51" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="center"><span class="Style4">
            <input type="submit" name="envoyer" id="envoyer" style="font:10px Verdana, Arial, Helvetica, sans-serif;" value=
                    "Créer votre profil" />
          </span></td>
        </tr>
      </table>
    </form></td>
  </tr>
</table>
</body>
</html>

**marcha** · 18/02/2009, 14h19

Peut-être que le navigateur a un problème a établir la largeur
des colonne si il n'affiche pas la ligne directement

essaie éventuellement de mettre un overflow: hidden à ton tr
et de fixer visibility: hidden et height à 1px pour le masquer
il subsistera un pixel, mais ça va peut-être résoudre le problème

**pasc06** · 18/02/2009, 14h23

Décidément merci Marcha de ta réactivité !

Effectivement ça ressemble à ça... J'ai le problème sur Firefox, mais pas sur IE...

Mais tes dernières indications sont un peu trop technique pour moi là... Tu peux me les rajouter sur le dernier code stp ? Merci d'avance...!

**marcha** · 18/02/2009, 15h21

en fait à relire ton code tu spécifie un width="264" à tes td mais pas au
td "Ma poitrine"

**pasc06** · 18/02/2009, 15h36

Oui c'est vrai la largeur n'était pas spécifiée.

Je l'ai ajoutée mais ça n'a pas corrigé le problème sur Firefox. Par contre sur IE ça s'affiche bien.

Comment faire ?

**marcha** · 18/02/2009, 15h38

C'est surtout à la colonne de gauche qu'il faut fixer une largeur
elle n'y est pas:

Code :

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

<td height="29" align="left" class="Style14">Ma poitrine</td>

Ajouter ou supprimer un champ de formulaire en fonction d'un menu déroulant

JavaScript

Discussions similaires

Partager

Partager