Input radio fonctionnant mal

Version imprimable

Bonjour, je ne sais pas trop si je dois poster ici ou dans la section javascript vu que je ne sait pas quelle partie de mon code pose probleme
Je cherche a faire un formulaire html différent selon la valeur de l'imput radio le problème est que le premier formulaire s'affiche toujours et les deux autres s'affiche en dessous.
Pour faire le changement j'utilise une fonction javascript je vais vous mettre les codes html et js qui me pose problème si quelqu'un a une idée de ce qui bloque.
voici la partie formulaire de mon html

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
<form method="post"> 
Type de connexion: 
<label><input id="typeLogPwd" type="radio" name="typeLogin" value="LogPwd" onchange="afficherLogPwd();"/> LogPwd </label> 
<label><input id="typeLogNumSecu" type="radio" name="typeLogin" value="LogNumSecu" onchange="afficherLogNumSecu();"/> LogNumSecu </label> 
<label><input id="typeLog" type="radio" name="typeLogin" value="Log" onchange="afficherLog();"/> Log </label> 
<div id="LogPwd" style="display: none;"> 
<table> 
<tr><td>Login: </td><td colspan="2"><input type="text" name="loginLogPwd" size="9" /></td></tr> 
<tr><td>pass: </td><td><input type="password" name="pass"/></td></tr>	
</table> 
</div> 
<div id="LogNumSecu" style="display: none;"> 
<table> 
<tr><td>Login: </td><td colspan="2"><input type="text" name="loginLogNumSecu" size="9" /></td></tr> 
<tr><td>Num Secu: </td><td><input type="password" name="pass"/></td></tr> 
</table> 
</div> 
<div id="Log" style="display: none;"> 
<table> 
<tr><td>Login: </td><td colspan="2"><input type="text" name="loginLog" size="9" /></td></tr>	
</table> 
</div> 
<input type="submit" value="Connexion" /> 
</form>

et le js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function afficherLogPwd() { 
document.getElementById('LogPwd').style.display = "block"; 
document.getElementById('LogNumSecu').style.display = "none"; 
document.getElementById('Log').style.display = "none";	
} 
function afficherLogNumSecu() { 
document.getElementById('LogPwd').style.display = "none"; 
document.getElementById('LogNumSecu').style.display = "block"; 
document.getElementById('Log').style.display = "none"; 
} 
function afficherLog() { 
document.getElementById('LogPwd').style.display = "none"; 
document.getElementById('LogNumSecu').style.display = "none"; 
document.getElementById('Log').style.display = "block"; 
}

05/05/2011, 16h34
Nheo_

Bonjour,

Je viens de tester ton code et tout marche bien : je n'ai bien qu'un seul div en fonction du radio. (Firefox 4).

Sous quel navigateur as tu testé ? Peux tu testé sur plusieurs ?

Et n'oublie pas : :tagcode: ^^. Sinon très difficile de lire ton code.
05/05/2011, 17h07
switchmo

Désolé pour les balises petit oubli de ma part.
En effet le code marche parfaitement seul (j'avait supprimer une partie du code qui n'avait rien a voir apperement le probleme vient du table qui faisait planter)
En tout cas merci quand meme car je n'ai pas eu l'idée de le tester tel quel!!!
05/05/2011, 19h29
switchmo

En fait le problème persiste mais seulement avec IE (et oui malheureusement c'est un obligation d'utiliser IE). En fait j'ai un peu plus cerner le problème sous IE après avoir cliqué sur l'input radio il faut refaire un click (peu importe ou) pour que le formulaire change (comme si il fallait confirmer le changement) Ce problème n'est présent ni sur chrome ni sur firefox et je n'arrive pas a voir d'ou cela vient.

Bonjour,
ce n'est pas une bonne idée que d'utiliser l'événement onchange sur des radios boutons, d'autant que IE ne considère le changement que lorsque l'élément à perdu le focus.
Il faut voir que lorsqu'un radio change cela entraîne le changement d'état des autres donc possible "emmêlage" de pinceau...

Il est dans ce cas plus judicieux de passer par l'événement onclick, sachant que quand on clique sur un radio bouton c'est pour le sélectionner.

Tu peux également fusionner tes fonctions en une seule
exemple
Code:

1 2 3 4 5 6 function affiche( obj){ var tId = ['LogPwd', 'LogNumSecu', 'Log']; // les IDs a afficher/masquer for( var i in tId){ document.getElementById( tId[i]).style.display = tId[i] == obj.value ? 'block' : 'none'; } }
avec un appel

Code:

<input id="typeLogPwd" type="radio" name="typeLogin" value="LogPwd" onclick="affiche(this);" /> LogPwd </label>