11548 sujets

JavaScript, DOM et API Web HTML5

[ Résolu ][ Problème d'affichage formulaire ]

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 : 


<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 : 


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 :

#engineer_fields {display : none ;}


Voila, j'ai essayé d'être le plus clair possible, n'hésitez pas si vous avez des questions.

Merci.
Modifié par Arkoze (22 Mar 2007 - 11:05)
Salut,

Je ne suis pas sûr que "table-row" soit supporté par IE.

Essaie peut-être ceci :
document.getElementById( 'engineer_fields' ).style.display = "" ;
// A la place de
// document.getElementById( 'engineer_fields' ).style.display = "table-row" ;
Ouais, c'est ce que je viens d'essayer de faire.
Effectivement, "table-row" n'est pas supporté par IE. Par contre, quand je met 


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


Cela fonctionne sur IE mais pas sur FF où les cases à cocher n'apparaissent pas du tout.

J'ai également essayé 


document.getElementById( 'engineer_fields' ).style.display = "inline" ;


ça fonctionne également sur IE, il m'affiche également les cases à cocher sur FF mais n'importe comment (sachant que mes cases à cocher sont dans une cellule d'un tableau).
Arkoze a écrit :
Par contre, quand je met 

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

Cela fonctionne sur IE mais pas sur FF où les cases à cocher n'apparaissent pas du tout.
C'est étrange. As-tu un exemple en ligne ?
Non vu que c'est un formulaire interne pour un intranet.

Regarde ce que ça donne

Initialement :
upload/11511-avant.jpg

Lorsque le service est selectionné (avec IE) c'est nickel
upload/11511-apres.jpg

Pareil mais avec FF, tu remarqueras la disposition
upload/11511-errorff.jpg

J'obtiens cela avec ce code :

document.getElementById( 'engineer_fields' ).style.display = "inline" ;

Modifié par Arkoze (21 Mar 2007 - 16:16)
Arkoze a écrit :
J'obtiens cela avec ce code :

document.getElementById( 'engineer_fields' ).style.display = "inline" ;
Avec ce code-là, c'est assez logique que FF réagisse mal. Mon étonnement concerne plutôt le code

document.getElementById( 'engineer_fields' ).style.display = "" ;
Si tu ne peux pas donner une URL, aurais-tu au moins un exemple minimal qui ne marche pas avec cette méthode ?
Ben en faite, avec cette méthode la 


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


les cases ne s'affichent pas du tout avec FF
Voila le strict minimum, tu pourras voir le problème que j'ai je pense.


<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"> </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"> </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>

Modifié par Arkoze (21 Mar 2007 - 17:23)
En fait, quand on initialise style.display avec une chaîne vide, les règles de la feuille de styles sont appliquées (dans ton cas, "display: none;").

A mon avis, le mieux est d'appliquer la solution suivante, qui te permettra en plus d'afficher engineer_fields si "Engineering" est sélectionné au chargement de la page ou si JavaScript est désactivé :
<!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>
Ah non, j'ai parlé trop vite je pense. ça ne fonctionne pas parfaitement.

Si je fais comme tu m'as dit, une fois arrivé sur la page, les cases à cocher sont déjà visibles, or, elles devraient être visibles que lorsque le service Engineering est selectionné.


C'est bizarre parce que lorsque je met le code minimum (celui que tu ma envoyé), cela fonctionne mais lorsque je l'adapte à mon formulaire de 600 lignes, ça merde

Je vais regarder ça de plus près, j'ai peut etre fait une erreur.
Modifié par Arkoze (22 Mar 2007 - 10:19)
Ah c'est bon, c'était une ptite erreur de ma part.

J'ai un autre problème, je sais pas si je peux le poster directement sur cette discussion ou en créer une nouvelle.
Arkoze a écrit :
J'ai un autre problème, je sais pas si je peux le poster directement sur cette discussion ou en créer une nouvelle.
S'il n'est pas directement lié à cette discussion, il vaut mieux en créer une nouvelle.

Par contre, si ce sujet est [Résolu], pourras-tu s'il te plaît l'indiquer ?
Sujet clos
Aller à