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...
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()".