Onchange et Onclick pour formulaire qui ne fonctionnent plus

Bonjour à tous,

J'ai créé il y a quelques années le site de mon centre de tourisme équestre, et je le fais évoluer de temps en temps mais là ça faisait 3 ans que je n'y avais plus touché et quelques petits bugs sont apparus. Je ne suis pas webmaster professionnelle, loin s'en faut !!! Alors à chaque fois que je me remets dessus, je repars presque de zéro. Et je sais que des pros ou amateurs éclairés comme il y a ici pourront m'apporter leur aide, la communauté internet autour du développement web est, je le sais maintenant, particulièrement généreuse et dynamique ! (et d'ailleurs je vous en remercie d'avance)

Voici mon problème :
J'ai un formulaire de contact à partir duquel les futurs clients peuvent réserver leur balade à cheval, et j'ai besoin pour traiter ces demandes de certains renseignements. J'avais donc à l'époque mis en place au sein de ce formulaire un menu déroulant sur le nombre de participants. Et avec des balises onchange et onclick, le script que j'avais fait faisait que si la personne sélectionnait par exemple '3' participants, s'ouvraient alors 3x2 menus déroulants (pour chaque participant un menu pour connaître son âge, et un pour connaître son niveau).
Je ne sais pas si je me fais bien comprendre, mais à l'époque ça marchait, et maintenant ça ne fonctionne plus : quand on choisit le nombre de participants, aucun menu supplémentaire ne s'ouvre.

Pouvez vous m'aider ?? Je ne sais pas ce qui a changé qui fait que ça ne fonctionne plus...

Voici le code de la partie du formulaire correspondante :

<fieldset><legend><span>Profil des participants</span></legend> <label
for="participants"><span>Nombre
de
participants </span>
<select name="participants" id="participants"
onchange="cacher('si1'); cacher('si2'); cacher('si3'); cacher('si4');

cacher('si5');afficher('si'+document.getElementById('participants').value)">
<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>

Et la page où se situe le code est : http://www.corambe.com/balades.html

Merci d'avance !

Bonjour.

Alors ce que tu peux faire pour avancer quand tu as un problème en javascript, est d'ouvrir la console d'erreur de ton navigateur (je te laisse le soin de chercher pour le navigateur que tu utilises ).

Et en gros tu vas voir sur ton site, il y a un fichier "phpmyvisites.js" qu'il ne trouve pas (ou plus), et quand tu cliques sur ton select, il te dit qu'il ne connait pas la fonction cacher (qui est peut-être dans le fichier manquant)

Je te laisse déjà étudier cette piste...

Ok je vais aller chercher de ce côté là. Et par hasard ce type de fonctionnement de menus déroulants secondaires vous savez pas s'il y a moyen de le faire autrement que par javascript?

Oui effectivement j'ai regardé, il y a une erreur JS sur la page, mais elle concerne un fichier phpmyvisite qui correspond à un truc que j'avais mis à l'époque pour les statistiques, et qui a donc rien à voir avec le problème du formulaire.
J'ai changé plusieurs fois d'hébergeurs, et le dernier changement avait un peu foutu le bordel dans la façon dont sont organisés mes différents dossiers dans le serveur. C'est peut-être venu de là que ça ait disparu...

Mais par contre effectivement, quand je teste le nombre de participants et que je checke la console d'erreurs, elle me sort qu'il y a une

"Uncaught Reference Error: cacher is not defined
onchange balades.html:1121"

En effet la fonction cacher n'est pas définie. Le problème c'est que je ne sais pas réellement comment le définir. Faudrait-il un dossier JS dans mon répertoire qui serait sensé définir cette fonction? Et si oui, lequel? JQuery?

Autre chose, la console d'erreur de Chrome (que j'utilise) précise ''balades.html:1121". Je ne sais pas si c'est une bonne interprétation, mais je me suis dit que ça voulait peut-être dire que l'erreur en question se situait sur la ligne 1121 du fichier balades.html.

Alors je ne sais pas si c'est valable, mais en tout cas la ligne 1121 c'est celle là :

cacher('si5');afficher('si'+document.getElementById('participants').value)">

Bon ça a l'air de correspondre mais je ne sais pas vraiment où est l'erreur là dedans...
Modifié par corambe (25 Mar 2015 - 23:02)

Bonjour.

corambe a écrit :
En effet la fonction cacher n'est pas définie. Le problème c'est que je ne sais pas réellement comment le définir. Faudrait-il un dossier JS dans mon répertoire qui serait sensé définir cette fonction? Et si oui, lequel? JQuery?

Tu n'es pas obligé de créer un nouveau fichier (ou dossier) avec tout tes JS, mais c'est préférable (tout comme pour le CSS).
On essaie de séparer ce qui est de l'architecture (html) du design et positionnement (css) et ce qui est de l'animation/intéraction (js).
Mais pour ton cas, il faut vérifier que ta fonction cacher(), et afficher() par la même existent (ce ne sont pas des fonctions natives javascript), donc elles doivent êtr défini quelquepart (directement dans ton head, dans ton body, ou dans un fichier séparé qu'il faut appeler). Et non, tu n'es pas obligé d'utiliser jQuery (il s'agit seulement d'un framework qui te facilite la vie)

corambe a écrit :
Autre chose, la console d'erreur de Chrome (que j'utilise) précise ''balades.html:1121". Je ne sais pas si c'est une bonne interprétation, mais je me suis dit que ça voulait peut-être dire que l'erreur en question se situait sur la ligne 1121 du fichier balades.html.

C'est effectivement bien la ligne qu'il te donne.