Firefox et getElementById [Résolu]

legrandse · 14/09/2011, 14h48

Salut à tous,

J'ai un problème avec une fonction sous Firefox (sous IE çà passe)

En résumé quand je clique sur un bouton radio, il m'affiche un champ de formulaire supplémentaire.

Cependant le champ en question est inclus dans un tableau et c'est bien là le problème selon moi.

Le champ supplémentaire ainsi que l'intitulé s'affichent bien sous FF mais complètement décalé dans la première colonne du tableau.

Sous IE il respecte (pour une fois) l'affichage c'est à dire "l'intitulé" dans la 1ère colonne et champ de saisie dans la 2ème.

Pour mieux comprendre voici une partie du code:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
 
function afficher()
{
	document.getElementById("champ_cache").style.display = "block";
}
 
function cacher()
{
	document.getElementById("champ_cache").style.display = "none";
}
 
</script>

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
<body onload="cacher(); ">
<form name="formulaire" method="post" action="connect.php">
 
<table border="0" width="100%"cellspacing="0" cellpadding="0">
 <tr>
        <td width="600px">
        Demande de carte :<input name="coche" type="radio" value="a" checked="checked" onClick="cacher(); afficher1();" /> <br/>
        Demande de duplicata :<input name="coche" type="radio" value="b" onClick="afficher(); cacher1();"/><br />
        Formulaire de déménagement :<input name="coche" type="radio" value="c" onClick="afficher(); cacher1();" />
        </td>
</tr>
 
 
<tr>
<td>
      	<table border="0" width="100%" cellspacing="1" cellpadding="0">
 
            <tr id="champ_cache" class="backgroundRoundedPanel">
	    	<td class="labelText" align="right" style="width:150px ; font-size:10px">Votre n° de code barre</td>
	    	<td> <input type="text" class="dataText"align="left"  name="id"></td>
	    </tr> 
 
            <tr class="backgroundPanel">
	       	<td class="labelText" align="right" style="width:150px ; font-size:10px">Nom : </td>
	       	<td> <input type="text" class="dataText" align="left" id="nameField" name="nom" style="text-transform: uppercase"></td>
            </tr>
            </table>
</td>
<td>
 
            <input type="submit" value="Valider les données" style="height:50px; width:138px"/>
            </form>
 
 
</td> 
</tr>
      </table>

Si vous savez comment je peux contourner ce problème.

Merci beaucoup.

andry.aime · 14/09/2011, 14h59

Bonsoir,

Les fonctions cacher1() et afficher1() existe

A+.

Joauc · 14/09/2011, 15h18

Je ne vois pas l'erreur. A mon avis c'est un problème de CSS .
Il doit y avoir un problème dans tes styles. FF et IE ne gère pas le CSS de la même manière.
A mon avis il faut chercher de ce côté là.

legrandse · 14/09/2011, 15h31

Citation:

Envoyé par andry.aime

Bonsoir,

Les fonctions cacher1() et afficher1() existe

A+.

Ah oui effectivement, mais cela ne change rien car c'est des fonctions supplémentaires que je n'ai pas recopié

En supprimant ces données dans le onClick il n'y a pas de changement.

legrandse · 14/09/2011, 15h35

Dans ma page de test, je n'ai pas de CSS.

Cà ne provient pas de là.

andry.aime · 14/09/2011, 15h57

La structure de ton document est bancale.
Tu ouvres une balise form, à l'intérieur tu mets une balise table, à l'intérieur de cette table, tu fermes la balise form. sans parler des tr qui n'ont pas le même nombre de td sans utiliser un colspan.

A+.

legrandse · 14/09/2011, 15h57

Bon ben j'ai trouvé.

J'ai donc rajouté une table à la fin comme ceci:

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
 
<table border="0" width="100%"cellspacing="0" cellpadding="0">
 <tr>
        <td width="600px">
        Demande de carte :<input name="coche" type="radio" value="a" checked="checked" onClick="cacher(); afficher1();" /> <br/>
        Demande de duplicata :<input name="coche" type="radio" value="b" onClick="afficher(); cacher1();"/><br />
        Formulaire de déménagement :<input name="coche" type="radio" value="c" onClick="afficher(); cacher1();" />
        </td>
</tr>
 
 
<tr>
<td>
      	<table border="0" width="100%" cellspacing="1" cellpadding="0">
 
            <tr id="champ_cache" class="backgroundRoundedPanel">
	    	<td class="labelText" align="right" style="width:150px ; font-size:10px">Votre n° de code barre</td>
	    	<td> <input type="text" class="dataText"align="left"  name="id"></td>
	    </tr> 
 
            <tr class="backgroundPanel">
	       	<td class="labelText" align="right" style="width:150px ; font-size:10px">Nom : </td>
	       	<td> <input type="text" class="dataText" align="left" id="nameField" name="nom" style="text-transform: uppercase"></td>
            </tr>
            </table>
</td>
<td>
 
            <input type="submit" value="Valider les données" style="height:50px; width:138px"/>
            </form>
 
 
</td> 
</tr>
 
 
 
 
 
<tr>
      <td>
          <table border="0" width="100%" cellspacing="1" cellpadding="0" id="champ_cache">
 
          <tr class="backgroundPanel">
	    	<td  width="100%"class="labelText" align="right" style="width:150px ; font-size:10px">Votre n° de code barre</td>
	    	<td align="right"> <input type="text" class="dataText"align="left"  name="id"></td>
	      </tr> 
 
           </table>
	 </td>
     </tr>
 
 
</table>

14/09/2011, 14h59	#2
andry.aime Rédacteur/Modérateur Andry Aimé Inscription : septembre 2007 Messages : 5 129 Détails du profil Informations personnelles : Nom : Andry Aimé Localisation : Ile Maurice Informations forums : Inscription : septembre 2007 Messages : 5 129 Points : 7 258 Points : 7 258	Bonsoir, Les fonctions cacher1() et afficher1() existe A+.
	00

14/09/2011, 15h18	#3
Joauc Membre régulier Jordane Étudiant Inscription : février 2010 Messages : 59 Détails du profil Informations personnelles : Nom : Jordane Âge : 23 Localisation : France, Puy de Dôme (Auvergne) Informations professionnelles : Activité : Étudiant Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2010 Messages : 59 Points : 81 Points : 81	Je ne vois pas l'erreur. A mon avis c'est un problème de CSS . Il doit y avoir un problème dans tes styles. FF et IE ne gère pas le CSS de la même manière. A mon avis il faut chercher de ce côté là.
	00

14/09/2011, 15h35	#5
legrandse Futur Membre du Club Inscription : décembre 2010 Messages : 74 Détails du profil Informations forums : Inscription : décembre 2010 Messages : 74 Points : 15 Points : 15	Dans ma page de test, je n'ai pas de CSS. Cà ne provient pas de là.
	00

14/09/2011, 15h57	#6
andry.aime Rédacteur/Modérateur Andry Aimé Inscription : septembre 2007 Messages : 5 129 Détails du profil Informations personnelles : Nom : Andry Aimé Localisation : Ile Maurice Informations forums : Inscription : septembre 2007 Messages : 5 129 Points : 7 258 Points : 7 258	La structure de ton document est bancale. Tu ouvres une balise form, à l'intérieur tu mets une balise table, à l'intérieur de cette table, tu fermes la balise form. sans parler des tr qui n'ont pas le même nombre de td sans utiliser un colspan. A+.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email