compatibilité Javascript IE | Firefox
Bonjour à tous,
Je viens de réaliser 2-3 petites fonctions que j'ai trouvé sur le net pour rendre mon formulaire plus dynamique.
Le code javascript fonctionne très bien sous Internet Explorer mais à malheureusement à moitié sous Firefox.
Lorsque l'on click sur le bouton radio "Oui", il fait apparaitre des autres champs du formulaire, ceci fonctionne très bien sous IE et Firefox, le probleme est que dans le SELECT "Votre club", je souhaite que lorsque l'option "Autre" est selectionnée, un champ input s'affiche juste en dessous.
Le script que j'ai trouvé sur le net, lié à un onChange fonctionne nikel sur IE mais pas sous Firefox, alors je viens vous demander de m'eclairer si c'est possible :)
=> Lien : [ Apercu ]
J'ai oublié de préciser que je suis un novice en Javascript :p
Voici mon code :
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193
|
<script language="javascript" type="text/javascript">
function show_infos()
{
document.getElementById("annee").style.display="";
document.getElementById("ceinture").style.display="";
document.getElementById("club").style.display="";
}
function hide_infos()
{
document.getElementById("annee").style.display="none";
document.getElementById("ceinture").style.display="none";
document.getElementById("club").style.display="none";
}
function afficheautre()
{
if (document.mafiche.clubs.options.value == "autre")
{
document.getElementById('autre_club').style.display="";
}
else
{
document.getElementById('autre_club').style.display="none";
}
}
</script>
<h3>Completer votre profil :</h3>
<div style="float:left;">
<form name="mafiche" id="compte_infos" method="post" action="">
<table>
<tr>
<td colspan="2">
<hr width="100%" style="border: none; border-top: 1px solid gray;" />
</td>
</tr>
<tr>
<td>
<label for="ac_prenom">Prénom</label>
</td>
<td>
<input type="text" name="ac_nom" id="ac_prenom" value="<?php echo $_SESSION['prenom']; ?>" />
</td>
</tr>
<tr>
<td>
<label for="ac_nom">Nom</label>
</td>
<td>
<input type="text" name="ac_prenom" id="ac_nom" value="<?php echo $_SESSION['nom']; ?>" />
</td>
</tr>
<tr>
<td colspan="2">
<hr width="100%" style="border: none; border-top: 1px solid gray;" />
</td>
</tr>
<tr>
<td>
<label for="ac_sexe">Sexe</label>
</td>
<td>
<input type="radio" name="ac_sexe" id="ac_sexe" checked="checked" value="H" style="border: 0px;" />Homme
<input type="radio" name="ac_sexe" id="ac_sexe" value="F" style="border: 0px;" />Femme
</td>
</tr>
<tr>
<td colspan="2">
<hr style="border: none; border-top: 1px solid gray;" />
</td>
</tr>
<tr>
<td>
<label for="ac_ville">Ville</label>
</td>
<td>
<input type="text" name="ac_ville" id="ac_ville" />
</td>
</tr>
<tr>
<td colspan="2">
<hr width="100%" style="border: none; border-top: 1px solid gray;" />
</td>
</tr>
<tr>
<td>
<label for="ac_photo">Photo de profil</label>
</td>
</tr>
<tr>
<td colspan="2">
<br />
<input type="file" size="27" name="ac_photo" id="ac_photo" />
</td>
</tr>
<tr>
<td colspan="2">
<hr width="100%" style="border: none; border-top: 1px solid gray;" />
</td>
</tr>
<tr>
<td>
<label for="ac_hobby">Hobbys</label>
</td>
</tr>
<tr>
<td colspan="2">
<br />
<textarea cols="32" rows="4" name="ac_hobby" id="ac_hobby" /></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<hr width="100%" style="border: none; border-top: 1px solid gray;" />
</td>
</tr>
<tr>
<td>
<label for="ac_pratiquant">Êtes-vous pratiquant ?</label>
</td>
<td>
<input type="radio" name="ac_pratiquant" id="ac_pratiquant" value="Non" onclick="hide_infos();" checked="checked" style="border: 0px;" />Non
<input type="radio" name="ac_pratiquant" id="ac_pratiquant" value="Oui" onclick="show_infos();" style="border: 0px; padding-left:30px;" />Oui
</td>
</tr>
</table>
</div>
<table style="padding-left: 20px;">
<tr id="annee" style="display:none;">
<td>
<label for="ac_annee">Depuis combien de temps ?</label>
<br />
<input type="text" id="ac_annee" size="34">
</td>
</tr>
<tr id="club" style="display:none;">
<td>
<br />
<label for="ac_club">Votre club</label>
<br />
<select name="clubs" size"1" id="ac_club" OnChange="afficheautre();">
<option>- Vovinam Club - Palais du Midi -</option>
<option>- Vovinam Club - Auderghem -</option>
<option>- Vovinam Club - Esneux -</option>
<option value="autre">- Autre -</option>
</select>
</td>
</tr>
<tr id="autre_club" style="display:none;">
<td>
<br />
<label for="ac_autre_club">Nom du Club</label>
<br />
<input type="text" id="ac_autre_club" size="34"></td>
</tr>
<tr id="ceinture" style="display:none;">
<td>
<br />
<label for="ac_ceinture">Votre ceinture</label>
<br />
<select size="1" id="ac_ceinture">
<option>Ceinture bleue (0 Cap)</option>
<option>Ceinture bleue (Premier Cap)</option>
<option>Ceinture bleue (Deuxième Cap)</option>
<option>Ceinture bleue (Troisième Cap)</option>
<option>Ceinture noire (0 Dang)</option>
<option>Ceinture noire (Première Dang)</option>
<option>Ceinture noire (Deuxième Dang)</option>
<option>Ceinture noire (Troisième Dang)</option>
<option>Maître (Quatrième Dang)</option>
<option>Maître (Cinquème Dang)</option>
<option>Maître (Sixième Dang)</option>
<option>Maître (Septième Dang)</option>
</select>
</td>
</tr>
</table>
<table width="600">
<tr>
<td style="text-align: left;">
<br />
<input type="submit" name="submit" value="Mofifier votre profil" />
</td>
</tr>
</table>
</form> |
:lol: