Probleme avec un input radio
switch
-
Zebrus -
Zebrus -
Bonjour,
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.
<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
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";
}
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.
<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
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";
}
A voir également:
- Probleme avec un input radio
- Station de radio - Télécharger - Médias et Actualité
- Input ou output ✓ - Forum Audio
- Fabriquer une antenne radio avec un cintre ✓ - Forum Audio
- Écouter la radio freebox pop - Forum Freebox
- Input not supported - Forum Ecran
2 réponses
Je ne connais pas bien onchange, mais pourquoi ne ferais tu pas un test (en php) sur la valeur de tes options ?
Car si tu mets juste onchange, ça veut dire que ça va à chaque fois faire 2 fonctions. Celle ou la valeur passe à 0 (qui change donc) et celle qui passe à 1. Et pas seulement celle qui passe à 1.
Tu vois ce que je veux dire ?
Car si tu mets juste onchange, ça veut dire que ça va à chaque fois faire 2 fonctions. Celle ou la valeur passe à 0 (qui change donc) et celle qui passe à 1. Et pas seulement celle qui passe à 1.
Tu vois ce que je veux dire ?
remplace onchange par onclick ou onfocus, car onchange ne fonctionne que pour les champs texte ou avec un select.
Un peu plus d'info ici http://www.commentcamarche.net/contents/javascript/jsevent.php3
et tout expliqué clairement mais en Anglais ici : http://www.htmlcodetutorial.com/forms/_INPUT_onChange.html
Un peu plus d'info ici http://www.commentcamarche.net/contents/javascript/jsevent.php3
et tout expliqué clairement mais en Anglais ici : http://www.htmlcodetutorial.com/forms/_INPUT_onChange.html