Firefox et getElementById

Version imprimable

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:

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:

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.

14/09/2011, 14h59
andry.aime

Bonsoir,

Les fonctions cacher1() et afficher1() existe :koi:

A+.
14/09/2011, 15h18
Joauc

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à.
14/09/2011, 15h31
legrandse

Citation:

Envoyé par andry.aime

Bonsoir,

Les fonctions cacher1() et afficher1() existe :koi:

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.
14/09/2011, 15h35
legrandse

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

Cà ne provient pas de là.
14/09/2011, 15h57
andry.aime

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+.

Bon ben j'ai trouvé.

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

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