Onclick ne marche pas sous IE

Résolu/Fermé
corambe - 28 oct. 2008 à 17:33
 corambe - 28 oct. 2008 à 20:08
Bonjour,
J'ai une fonction javascript qui ne fonctionne pas sous IE alors que ça marche très bien avec FF. C'est un onclick (il y a un onblur qui, lui, fonctionne).
Je ne comprends vraiment pas pourquoi...

Je vous mets le script et la partie html concernée.
[code] <script language="JavaScript" type="text/javascript">
function afficher(theid)
{
document.getElementById(theid).style.display = 'block';
}
function cacher(theid)
{
document.getElementById(theid).style.display = 'none';
}
function verifMail(champ)
{
var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
if(!regex.test(champ.value))
{
surligne(champ, true);
return false;
}
else
{
surligne(champ, false);
return true;
}
}
function verifTel(champ)
{
var regex = /^(0[1-68])(?:[ _.-]?(\d{2})){4}$/;
if(!regex.test(champ.value))
{
surligne(champ, true);
return false;
}
else
{
surligne(champ, false);
return true;
}
}
function verifForm(f)
{
var mailOk = verifMail(f.email);
var telOk = verifTel(f.telephone);
if(mailOk && telOk)
return true
else
{
alert("Veuillez remplir correctement tous les champs");
return false;
}
}
function surligne(champ, erreur)
{
if(erreur)
champ.style.backgroundColor = "#fba";
else
champ.style.backgroundColor = "";
}
/code

Et le html :
[code]
<fieldset><legend><span>Profil des participants</span></legend>
<label for="participants"><span>Nombre
de
participants
</span>
<select name="participants" id="participants">
<option value="---">---</option>
<option value="1"
onclick="afficher('si1'); cacher('si2'); cacher('si3'); cacher('si4'); cacher('si5')">1</option>
<option value="2"
onclick="afficher('si2'); cacher('si1'); cacher('si3'); cacher('si4'); cacher('si5')">2</option>
<option value="3"
onclick="afficher('si3'); cacher('si2'); cacher('si1'); cacher('si4'); cacher('si5')">3</option>
<option value="4"
onclick="afficher('si4'); cacher('si2'); cacher('si3'); cacher('si1'); cacher('si5')">4</option>
<option value="5"
onclick="afficher('si5'); cacher('si2'); cacher('si3'); cacher('si4'); cacher('si1')">5</option>
</select>
</label>
<div id="si1" style="display: none;"><label
for="a11"><span>Âge du 1er participant</span>
<select name="a11" id="a11">
<option value="---">---</option>
<option value="adulte11">Adulte</option>
<option value="ado11">Adolescent</option>
<option value="enfant_plus11">Enfant de plus de 10 ans</option>
<option value="enfant_moins11">Enfant de moins de 10 ans</option>
</select>
</label><label for="n11"><span>Niveau du 1er
participant</span>
<select name="n11" id="n11">
<option value="---">---</option>
<option value="jamais11">Jamais monté sur un cheval</option>
<option value="debutant11">Cavalier débutant</option>
<option value="occasionnel11">Cavalier occasionnel</option>
<option value="confirme11">Cavalier confirmé</option>
</select>
</label>
</div>
<div id="si2" style="display: none;">
<label for="a12"><span>Âge du 1er participant</span>
<select name="a12" id="a12">
<option value="---">---</option>
<option value="adulte12">Adulte</option>
<option value="ado12">Adolescent</option>
<option value="enfant_plus12">Enfant de plus de 10 ans</option>
<option value="enfant_moins12">Enfant de moins de 10 ans</option>
</select>
</label><label for="n12"><span>Niveau du 1er
participant</span>
<select name="n12" id="n12">
<option value="---">---</option>
<option value="jamais12">Jamais monté sur un cheval</option>
<option value="debutant12">Cavalier débutant</option>
<option value="occasionnel12">Cavalier occasionnel</option>
<option value="confirme12">Cavalier confirmé</option>
</select>
</label>
<label for="a22"><span>Âge du 2ème participant</span>
<select name="a22" id="a22">
<option value="---">---</option>
<option value="adulte22">Adulte</option>
<option value="ado22">Adolescent</option>
<option value="enfant_plus22">Enfant de plus de 10 ans</option>
<option value="enfant_moins22">Enfant de moins de 10 ans</option>
</select>
</label><label for="n22"><span>Niveau du
2ème
participant</span>
<select name="n22" id="n22">
<option value="---">---</option>
<option value="jamais22">Jamais monté sur un cheval</option>
<option value="debutant22">Cavalier débutant</option>
<option value="occasionnel22">Cavalier occasionnel</option>
<option value="confirme22">Cavalier confirmé</option>
</select>
</label>
</div>
<div id="si3" style="display: none;">
<label for="a13"><span>Âge du 1er participant</span>
<select name="a13" id="a13">
<option value="---">---</option>
<option value="adulte13">Adulte</option>
<option value="ado13">Adolescent</option>
<option value="enfant_plus13">Enfant de plus de 10 ans</option>
<option value="enfant_moins13">Enfant de moins de 10 ans</option>
</select>
</label><label for="n13"><span>Niveau du 1er
participant</span>
<select name="n13" id="n13">
<option value="---">---</option>
<option value="jamais13">Jamais monté sur un cheval</option>
<option value="debutant13">Cavalier débutant</option>
<option value="occasionnel13">Cavalier occasionnel</option>
<option value="confirme13">Cavalier confirmé</option>
</select>
</label>
<label for="a23"><span>Âge du 2ème participant</span>
<select name="a23" id="a23">
<option value="---">---</option>
<option value="adulte23">Adulte</option>
<option value="ado23">Adolescent</option>
<option value="enfant_plus23">Enfant de plus de 10 ans</option>
<option value="enfant_moins23">Enfant de moins de 10 ans</option>
</select>
</label><label for="n23"><span>Niveau du
2ème
participant</span>
<select name="n23" id="n23">
<option value="---">---</option>
<option value="jamais23">Jamais monté sur un cheval</option>
<option value="debutant23">Cavalier débutant</option>
<option value="occasionnel23">Cavalier occasionnel</option>
<option value="confirme23">Cavalier confirmé</option>
</select>
</label>
<label for="a33"><span>Âge du 3ème participant</span>
<select name="a33" id="a33">
<option value="---">---</option>
<option value="adulte33">Adulte</option>
<option value="ado33">Adolescent</option>
<option value="enfant_plus33">Enfant de plus de 10 ans</option>
<option value="enfant_moins33">Enfant de moins de 10 ans</option>
</select>
</label><label for="n33"><span>Niveau du
3ème
participant</span>
<select name="n33" id="n33">
<option value="---">---</option>
<option value="jamais33">Jamais monté sur un cheval</option>
<option value="debutant33">Cavalier débutant</option>
<option value="occasionnel33">Cavalier occasionnel</option>
<option value="confirme33">Cavalier confirmé</option>
</select>
</label>
</div>
<div id="si4" style="display: none;">
<label for="a14"><span>Âge du 1er participant</span>
<select name="a14" id="a14">
<option value="---">---</option>
<option value="adulte14">Adulte</option>
<option value="ado14">Adolescent</option>
<option value="enfant_plus14">Enfant de plus de 10 ans</option>
<option value="enfant_moins14">Enfant de moins de 10 ans</option>
</select>
</label><label for="n14"><span>Niveau du 1er
participant</span>
<select name="n14" id="n14">
<option value="---">---</option>
<option value="jamais14">Jamais monté sur un cheval</option>
<option value="debutant14">Cavalier débutant</option>
<option value="occasionnel14">Cavalier occasionnel</option>
<option value="confirme14">Cavalier confirmé</option>
</select>
</label>
<label for="a24"><span>Âge du 2ème participant</span>
<select name="a24" id="a24">
<option value="---">---</option>
<option value="adulte24">Adulte</option>
<option value="ado24">Adolescent</option>
<option value="enfant_plus24">Enfant de plus de 10 ans</option>
<option value="enfant_moins24">Enfant de moins de 10 ans</option>
</select>
</label><label for="n24"><span>Niveau du
2ème
participant</span>
<select name="n24" id="n24">
<option value="---">---</option>
<option value="jamais24">Jamais monté sur un cheval</option>
<option value="debutant24">Cavalier débutant</option>
<option value="occasionnel24">Cavalier occasionnel</option>
<option value="confirme24">Cavalier confirmé</option>
</select>
</label>
<label for="a34"><span>Âge du 3ème participant</span>
<select name="a34" id="a34">
<option value="---">---</option>
<option value="adulte34">Adulte</option>
<option value="ado34">Adolescent</option>
<option value="enfant_plus34">Enfant de plus de 10 ans</option>
<option value="enfant_moins34">Enfant de moins de 10 ans</option>
</select>
</label><label for="n34"><span>Niveau du
3ème
participant</span>
<select name="n34" id="n34">
<option value="---">---</option>
<option value="jamais34">Jamais monté sur un cheval</option>
<option value="debutant34">Cavalier débutant</option>
<option value="occasionnel34">Cavalier occasionnel</option>
<option value="confirme34">Cavalier confirmé</option>
</select>
</label>
<label for="a44"><span>Âge du 4ème participant</span>
<select name="a44" id="a44">
<option value="---">---</option>
<option value="adulte44">Adulte</option>
<option value="ado44">Adolescent</option>
<option value="enfant_plus44">Enfant de plus de 10 ans</option>
<option value="enfant_moins44">Enfant de moins de 10 ans</option>
</select>
</label><label for="n44"><span>Niveau du
4ème
participant</span>
<select name="n44" id="n44">
<option value="---">---</option>
<option value="jamais44">Jamais monté sur un cheval</option>
<option value="debutant44">Cavalier débutant</option>
<option value="occasionnel44">Cavalier occasionnel</option>
<option value="confirme44">Cavalier confirmé</option>
</select>
</label>
</div>
<div id="si5" style="display: none;">
<label for="a15"><span>Âge du 1er participant</span>
<select name="a15" id="a15">
<option value="---">---</option>
<option value="adulte15">Adulte</option>
<option value="ado15">Adolescent</option>
<option value="enfant_plus15">Enfant de plus de 10 ans</option>
<option value="enfant_moins15">Enfant de moins de 10 ans</option>
</select>
</label><label for="n15"><span>Niveau du 1er
participant</span>
<select name="n15" id="n15">
<option value="---">---</option>
<option value="jamais15">Jamais monté sur un cheval</option>
<option value="debutant15">Cavalier débutant</option>
<option value="occasionnel15">Cavalier occasionnel</option>
<option value="confirme15">Cavalier confirmé</option>
</select>
</label>
<label for="a25"><span>Âge du 2ème participant</span>
<select name="a25" id="a25">
<option value="---">---</option>
<option value="adulte25">Adulte</option>
<option value="ado25">Adolescent</option>
<option value="enfant_plus25">Enfant de plus de 10 ans</option>
<option value="enfant_moins25">Enfant de moins de 10 ans</option>
</select>
</label><label for="n25"><span>Niveau du
2ème
participant</span>
<select name="n25" id="n25">
<option value="---">---</option>
<option value="jamais25">Jamais monté sur un cheval</option>
<option value="debutant25">Cavalier débutant</option>
<option value="occasionnel25">Cavalier occasionnel</option>
<option value="confirme25">Cavalier confirmé</option>
</select>
</label>
<label for="a35"><span>Âge du 3ème participant</span>
<select name="a35" id="a35">
<option value="---">---</option>
<option value="adulte35">Adulte</option>
<option value="ado35">Adolescent</option>
<option value="enfant_plus35">Enfant de plus de 10 ans</option>
<option value="enfant_moins35">Enfant de moins de 10 ans</option>
</select>
</label><label for="n35"><span>Niveau du
3ème
participant</span>
<select name="n35" id="n35">
<option value="---">---</option>
<option value="jamais35">Jamais monté sur un cheval</option>
<option value="debutant35">Cavalier débutant</option>
<option value="occasionnel35">Cavalier occasionnel</option>
<option value="confirme35">Cavalier confirmé</option>
</select>
</label>
<label for="a45"><span>Âge du 4ème participant</span>
<select name="a45" id="a45">
<option value="---">---</option>
<option value="adulte45">Adulte</option>
<option value="ado45">Adolescent</option>
<option value="enfant_plus45">Enfant de plus de 10 ans</option>
<option value="enfant_moins45">Enfant de moins de 10 ans</option>
</select>
</label><label for="n45"><span>Niveau du
4ème
participant</span>
<select name="n45" id="n45">
<option value="---">---</option>
<option value="jamais45">Jamais monté sur un cheval</option>
<option value="debutant45">Cavalier débutant</option>
<option value="occasionnel45">Cavalier occasionnel</option>
<option value="confirme45">Cavalier confirmé</option>
</select>
</label>
<label for="a55"><span>Âge du 5ème participant</span>
<select name="a55" id="a55">
<option value="---">---</option>
<option value="adulte55">Adulte</option>
<option value="ado55">Adolescent</option>
<option value="enfant_plus55">Enfant de plus de 10 ans</option>
<option value="enfant_moins55">Enfant de moins de 10 ans</option>
</select>
</label><label for="n55"><span>Niveau du
5ème
participant</span>
<select name="n55" id="n55">
<option value="---">---</option>
<option value="jamais55">Jamais monté sur un cheval</option>
<option value="debutant55">Cavalier débutant</option>
<option value="occasionnel55">Cavalier occasionnel</option>
<option value="confirme55">Cavalier confirmé</option>
</select>
</label>
</div>
</fieldset>
/code

Merci d'avance à tout ceux qui voudront bien m'aider...
A voir également:

2 réponses

macgawel Messages postés 664 Date d'inscription mercredi 7 mai 2008 Statut Membre Dernière intervention 1 novembre 2008 89
28 oct. 2008 à 19:33
Bonjour.

A priori, le problème c'est que IE ne sait pas gérer le JS dans les option.

Il faudrait que tu réécrives le code pour gérer le onchange directement dans le select

Exemple :
<select name="participants" id="participants"
onchange="cacher('si1'); cacher('si2'); cacher('si3'); cacher('si4');
cacher('si5');afficher('si'+document.getElementById('participants').value)">

Je demande de tout cacher, puis j'affiche uniquement le bon.

Soit dit en passant, tu pourrais modifier ta fonction affiche(), si tu ne l'utilises pas ailleurs :
function afficher(theid)
{
	for (i = 1; i <= 5; i++) {
		document.getElementById('si'+i).style.display = 'none';
	}
	document.getElementById(theid).style.display = 'block';
}

Et du coup, tu ne gardes que cette fonction et tu peux dégager les "cacher()".
1
Merci beaucoup, ça marche !!!
0