Firefox et getElementById

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

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>

Firefox et getElementById

JavaScript

Discussions similaires

Partager

Partager