11550 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Onclick ne fonctionnant pas sur IE

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.
  <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 = "";
}


Et le html :

  <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>


Merci d'avance à tout ceux qui voudront bien m'aider...
Modifié par corambe (28 Oct 2008 - 20:11)
Bjr, t'as vérifié, surement avec des alert() que chaque fonction s'accomplissait jusqu'au bout ?
Je pense que pour moins décourager les gens tu pourrais :
1-mettre de l'indentation dans le js
2-raccourcir le html à ce qui nous intéresse.
oui, c'est vrai.
Alors le lien vers la page c'est celui-ci :
http://www.corambe.com/randos/r%E9servation.html
(oui je sais il faut que j'enlève l'accent... Smiley confused )

Pour l'html limité à ce qui nous concerne :
  <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>

(en fait c'était long parce que j'avais mis les div, mais si il n'y en a pas besoin, c'est sur que c'est plus clair)

Alors, par contre, je suis une newbie, donc je sais pas comment vérifier avec des alert() que les fonctions s'accomplissent, ce que je sais c'est que ça fonctionne sans problème sur FF.
Est ce que vous pensez qu'il faut que je cherche de ce côté là?

sinon pour l'indentation dans le js, je connais pas ce terme (indentation), mais je peux essayer de dire à quoi correspondent chaque fonction...

function verifMail(champ) //donc là c'est pour vérifier que le champ mail soit bien rempli, grâce aux expressions régulières
{
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) //idem mais pour le téléphone
{
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) // là ça vérifie que les deux fonctions susdites sont ok et si ça l'est pas ça empêche l'envoi du formulaire
{
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) //et ici c'est pour que le champ soit coloré en rouge s'il y a erreur
{
if(erreur)
champ.style.backgroundColor = "#fba";
else
champ.style.backgroundColor = "";
}


Bon voilà, je sais pas si ça vous semble plus clair mais j'aurais essayé...
Modifié par corambe (28 Oct 2008 - 19:59)
Bon ben ça y est c'est ok, on m'a dit comment faire.
Au passage si plus tard ça peut aider quelqu'un :
le problème est bien que IE ne gère pas le js en option, donc là par exemple
pour résoudre le problème, j'ai mis ça =>

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

Merci pour vos réponses !
Sujet clos
Aller à