[ affichage de formulaire ]

Version imprimable

Bonjour,

J'ai besoin d'un peu d'aide.
Je vous explique mon problème. J'ai un formulaire avec une liste déroulante.

J'aimerai que quand un service est séléctionné (en l'occurence service 'Engineering'), des cases à cocher apparaissent en dessous du menu déroulant. J'y suis arrivé mais cela fonctionne uniquement sur FireFox et pas sur IE.

Voici mon code :
Code:

1 2 3 4 5 6 <select name="Service" size="1" onchange=" showEngineer( this ) ; " onkeyup="showEngineer( this ) ; "> <option value="Engineering">Engineering</option> <option value="IT">IT</option> <option value="Specification">Specifications</option> </select>
Voici mon code javascript :
Code:

1 2 3 4 5 6 7 8 9 function showEngineer( _this ) { if ( _this.value == 'Engineering' ) { document.getElementById( 'engineer_fields' ).style.display = "table-row" ; } else { document.getElementById( 'engineer_fields' ).style.display = "none" ; } }
Et en ce qui concerne les cases à cocher que je voudrais faire apparaitre, elles sont dans le code mais cacher grâce au CSS

Voici mon code CSS :
Code:

1 2 #engineer_fields {display : none ;}
Voila, j'ai essayé d'être le plus clair possible, n'hésitez pas si vous avez des questions.

Merci.

21/03/2007, 15h20
SpaceFrog

Code:

document.getElementById( 'engineer_fields' ).style.display = "table-row" ;

=>

Code:

document.getElementById( 'engineer_fields' ).style.display = "inline" ;
21/03/2007, 15h29
Arkoze
Non, en faite, vu que mes cases à cocher sont dans un tableau, il faut que je mette
Code:

1 2 document.getElementById( 'engineer_fields' ).style.display = "table-row" ;
Cela fonctionne parfaitement sur FireFox mais pas sur IE.
21/03/2007, 15h30
SpaceFrog

oui ben tout le problème à l'air de venir du fait qu'IE ne connaitrait pas table-row ...

essaye

Code:

display=''
21/03/2007, 15h37
Arkoze
Alors, je viens d'essayer les 2 solutions que tu m'as propposé.

2 cas de figure, lorsque je met
Code:

1 2 document.getElementById( 'engineer_fields' ).style.display = "inline" ;
Cela fonctionne sur IE mais il m'affiche mes cases à cocher un peu n'importe comment sur FF

Lorsque je met
Code:

1 2 document.getElementById( 'engineer_fields' ).style.display = "" ;
ça fonctionne toujours sur IE mais ne m'affiche pas du tout mes cases à cocher sur FF
21/03/2007, 16h12
SpaceFrog

display='block' ?
21/03/2007, 16h23
Arkoze

Non meme pas, je crois que j'ai essayé tous les attributs.

Le meilleur résultat que j'ai obtenu pour l'instant, en utilisant "inline" c'est l'affichage des cases à cocher sur IE et FF mais sur FF, elles ne s'affichent pas corretement.
21/03/2007, 16h26
SpaceFrog

elles sont dans des tableaux ?

tu peux filer le code html des objets cachés ?

Code:

1
2
3
4
5
6
 
<tr id="engineer_fields">	
<td width="50">&nbsp;</td>					
<td class="champs">Diffusion List : </td>		
<td class="champs"><input type="checkbox" name="DevelopmentTeam" value="yes" id="DevelopmentTeam" /> <label for="DevelopmentTeam">F10 Development Team</label> <input type="checkbox" name="Engineering" value="yes" id="Engineering"/><label for="Engineering"> F10 Engineering</label></td>	
</tr>

Là, t'as tout ce qu'il faut pour tester le résultat

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
 
<script type="text/javascript">
function showEngineer( _this ) {
if ( _this.value == 'Engineering' ) {
		document.getElementById( 'engineer_fields' ).style.display = "inline" ;
	}
	else {
		document.getElementById( 'engineer_fields' ).style.display = "none" ;
	}
}
 
 
 
</script>
<style type="text/css">
 
#engineer_fields {display : none ;}
 
</style>
<body>
 
		<table height="100%" width="800" border="0" cellpadding="3">	
				<tr>
					<td width="50">&nbsp;</td>
					<td class="champs">Service :</td>
					<td>
					<select name="Service" size="1" onchange=" showEngineer( this ) ; " onkeyup="showEngineer( this ) ; ">
					<option>< ------- Choose a service ------- ></option>	
					<option value="Administration">Administration</option>
					<option value="Engineering">Engineering</option>
					<option value="IT" >IT</option>	
					</select> 
					</td>	
				</tr>	
				<tr id="engineer_fields">	
					<td width="50">&nbsp;</td>					
					<td class="champs">Diffusion List : </td>		
					<td class="champs"><input type="checkbox" name="DevelopmentTeam" value="yes" id="DevelopmentTeam"> <label for="DevelopmentTeam"> Development Team </label> <input type="checkbox" name="Engineering" value="yes" id="Engineering"><label for="Engineering"> Engineering</label></td>	
				</tr>
			</table>
</body>

Problème résolu

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
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"><head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
 
	<script type="text/javascript">
 
function showEngineer() {
	var fields = document.getElementById("engineer_fields");
 
	if (document.getElementById("Service").value == 'Engineering') {
		fields.style.display = "" ;
	}
	else {
		fields.style.display = "none" ;
	}
}
 
window.onload = showEngineer;
 
	</script>
</head><body>
 
<table height="100%" width="800" border="0" cellpadding="3">	
				<tr>
					<td width="50"> </td>
					<td class="champs">Service :</td>
					<td>
					<select id="Service" name="Service" size="1" onchange="showEngineer();" onkeyup="showEngineer();">
					<option>< ------- Choose a service ------- ></option>	
					<option value="Administration">Administration</option>
					<option value="Engineering">Engineering</option>
					<option value="IT" >IT</option>	
					</select> 
					</td>	
				</tr>	
				<tr id="engineer_fields">	
					<td width="50"> </td>					
					<td class="champs">Diffusion List : </td>		
					<td class="champs"><input type="checkbox" name="DevelopmentTeam" value="yes" id="DevelopmentTeam" /> <label for="DevelopmentTeam">Development Team </label> <input type="checkbox" name="Engineering" value="yes" id="Engineering" /><label for="Engineering">Engineering</label></td>	
				</tr>
			</table>
 
</body></html>