Input type checkbox qui ne s'exécute pas

**binco** · 20/05/2014, 11h42

Bonjour,
Quand je mets une question à choix simple (form3) à coté d'une question à choix multiple (form4), la question à choix multiple (form4) ne s’exécute pas.
Pourtant quand j'isole form4 dans une autre page web pour l’exécuter ça marche.
J'ai beau relire le code je ne trouve pas d’où viens l'erreur??
Cordialement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function reponse(form3){
     if (form3.bouton[0].checked) {alert("Vous preferer " + form3.bouton[0].value)}
else if (form3.bouton[1].checked) {alert("Vous preferer " + form3.bouton[1].value)}
else if (form3.bouton[2].checked) {alert("Vous preferer " + form3.bouton[2].value)}
else {alert("Vus n'avez pas fait de choix")}
}
function choixmulti(form4){
if ( (document.form4.elements[0].checked==true) && (document.form4.elements[1].checked==false) && (document.form4.elements[2].checked==true) ) {alert("Bonnes reponses")}
else {alert("Mauvaises reponses")}
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form name="form3">	
Quelle est votre technique preferee?<br>
<input type="radio" name="bouton" value="A">A<br>
<input type="radio" name="bouton" value="B">B<br>
<input type="radio" name="bouton" value="C">C<br>
<input type="button" name="Validez" value="Quel et votre choix ?" onClick="reponse(form3)">
<form>
<br>
 
<form name="form4">
Qelles sont vos choix?<br>
<input type="checkbox" name="choix0" value="A">A<br>
<input type="checkbox" name="choix1" value="B">B<br>
<input type="checkbox" name="choix1" value="C">C<br>
<input type="button" name="Validez2" value="Validez" onClick="choixmulti(form4)">
</form>

**SpaceFrog** · 20/05/2014, 12h56

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onClick="reponse(form3)

form3 = ???

**binco** · 20/05/2014, 13h58

Peux tu développer SpaceFrog?

**SpaceFrog** · 20/05/2014, 14h16

moi ?

ben la question est que vaut form3 ...
si tu tentes de passer en paramètre le formulaire ...

**binco** · 20/05/2014, 15h08

Tu veux dire que form3 est un formulaire et qu'il ne peut être codé en variable?

J'ai sorti les variables form3 et form4 lors de l'appel des fonctions onClick

Même résultat: quand je les places dans 2 pages différentes ça marche mais dans la même page le 2eme formulaire ne s’exécute pas

Nouveau code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<html>
 
<head>
 
<script language="Javascript">
 
function reponse()
{
     if (document.form3.bouton[0].checked) {alert("Vous preferer " + document.form3.bouton[0].value)}
else if (document.form3.bouton[1].checked) {alert("Vous preferer " + document.form3.bouton[1].value)}
else if (document.form3.bouton[2].checked) {alert("Vous preferer " + document.form3.bouton[2].value)}
else {alert("Vus n'avez pas fait de choix")}
}
 
function choixmulti()
{
if ( (document.form4.elements[0].checked==true) && (document.form4.elements[1].checked==false) && (document.form4.elements[2].checked==true) ) {alert("Bonnes reponses")}
else {alert("Mauvaises reponses")}
}
 
 
</script>
 
</head>
 
<body>
 
<form name="form3">	
Quelle est votre technique preferee?<br>
<input type="radio" name="bouton" value="Gravure">La gravure<br>
<input type="radio" name="bouton" value="Peinture">La peiture<br>
<input type="radio" name="bouton" value="Dessin">Le dessin<br>
<input type="button" name="Validez" value="Quel et votre choix ?" onClick="reponse()">
<form>
<br>
 
<form name="form4">
Qelles sont vos choix?<br>
<input type="checkbox" name="choix0" value="Gravure">Gravure<br>
<input type="checkbox" name="choix1" value="Peiture">Peiture<br>
<input type="checkbox" name="choix1" value="Peiture">Dessin<br>
<input type="button" name="Validez2" value="Validez" onClick="choixmulti()">
</form>
 
</body>
 
</body>
 
</html>

**SpaceFrog** · 20/05/2014, 15h16

revois les basiques sur les pointages sur les elements ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.forms['nomform']
document.getElemetnById('IdForm')

ou dans le form

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.form

**iakou** · 20/05/2014, 19h29

Bonsoir.

Votre code était presque bon, mais il manquait une </form> à la fin du formulaire form3 (vous aviez remis <form> par erreur !)
C'est cela qui empêchait de tourner rond ! (j'y ai passé un peu de temps, car je ne comprenais pas pourquoi cela ne fonctionnait pas)

J'ai corrigé un peu car il y avait des choses inutiles notamment des parenthèses et accolades...
Vous pouvez utilisez les accents dans vos phrases littérales (mais surtout pas dans les noms de variables javascript)...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<html><head> 
<script type="text/javascript"> 
function reponse()
      {
      if (form3.bouton[0].checked) alert("Vous préférez " + form3.bouton[0].value) ;
else if (form3.bouton[1].checked) alert("Vous préférez " + form3.bouton[1].value) ;
else if (form3.bouton[2].checked) alert("Vous préférez " + form3.bouton[2].value) ;
else alert("Vous n'avez pas fait de choix") ;
      }
 
function choixmulti()
     {
if ( document.forms.form4.choix0.checked===true && 
     document.forms.form4.choix1.checked===false &&
     document.forms.form4.choix2.checked===true )
     alert("Bonne réponse") ;
else
     alert("Mauvaise réponse") ;
     } 
</script>
 
</head><body>
 
<form name="form3">	
Quelle est votre technique préférée ?<br>
<input type="radio" name="bouton" value="Gravure">La gravure<br>
<input type="radio" name="bouton" value="Peinture">La peinture<br>
<input type="radio" name="bouton" value="Dessin">Le dessin<br>
<input type="button" value="Quel est votre choix ?" onClick="reponse()">
</form>
<br>
 
<form name="form4">
Quels sont vos choix ?<br>
<input type="checkbox" name="choix0" value="Gravure">Gravure<br>
<input type="checkbox" name="choix1" value="Peinture">Peinture<br>
<input type="checkbox" name="choix2" value="Dessin">Dessin<br>
<input type="button" value="Validez" onClick="choixmulti()">
</form>
 
</body></html>

Vous pourriez aussi faire une boucle "for" Pour la fonction reponse() cela éviterait ce "if imbriqué" pas très joli (bien qu"efficace).

Bon développement !

**binco** · 21/05/2014, 09h30

On a beau relire ...
Merci

**NoSmoking** · 21/05/2014, 10h51

Bonjour,
si je puis me permettre quelques remarques, tu gagnerais à homogénéiser tes appels aux références des différents éléments, un coup tu fais form3.bouton[0] et un coup document.forms.form4.choix0.

Une façon de faire serait de passer la référence de la FORM à la fonction, comme préconisé par SpaceFrog, puis d'utiliser une notation homogène.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function reponse( oForm) {
  if( oForm['bouton'][0].checked) {
    alert("Vous préférez " + oForm['bouton'][0].value);
  }
  else if( oForm['bouton'][1].checked) {
    alert("Vous préférez " + oForm['bouton'][1].value);
  }
  else if( oForm['bouton'][2].checked) {
    alert("Vous préférez " + oForm['bouton'][2].value);
  }
  else{
    alert("Vous n'avez pas fait de choix");}
}
function choixmulti( oForm) {
  if( oForm['choix0'].checked === true && oForm['choix1'].checked === false && oForm['choix2'].checked === true) {
    alert("Bonne réponse");
  }
  else {
    alert("Mauvaise réponse");
  }
}

avec le html comme suit

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form name="form3">
     Quelle est votre technique préférée ?<br>
    <input type="radio" name="bouton" value="Gravure">La gravure<br>
    <input type="radio" name="bouton" value="Peinture">La peinture<br>
    <input type="radio" name="bouton" value="Dessin">Le dessin<br>
    <input type="button" value="Quel est votre choix ?" onclick="reponse(this.form)">
</form>
<br>
<form name="form4">
     Quels sont vos choix ?<br>
    <input type="checkbox" name="choix0" value="Gravure">Gravure<br>
    <input type="checkbox" name="choix1" value="Peinture">Peinture<br>
    <input type="checkbox" name="choix2" value="Dessin">Dessin<br>
    <input type="button" value="Validez" onclick="choixmulti(this.form)">
</form>

une autre amélioration de l'écriture possible serait de remplacer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if( oForm['choix0'].checked === true && oForm['choix1'].checked === false && oForm['choix2'].checked === true) {

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if( oForm['choix0'].checked && !oForm['choix1'].checked && oForm['choix2'].checked) {

Envoyé par iakou

Votre code était presque bon, mais il manquait une </form> à la fin du formulaire form3 (vous aviez remis <form> par erreur !)

Bien vu! cela suffit effectivement pour ne pas retrouver la référence à form4.

Envoyé par iakou

J'ai corrigé un peu car il y avait des choses inutiles notamment des parenthèses et accolades...

pour les parenthèses, là je ne partage pas je préfère des accolades "inutiles" mais qui ne seront pas source de bugs ultérieurs et sont un plus à la clarté du code à mon sens.

Input type checkbox qui ne s'exécute pas

JavaScript

Discussions similaires

Partager

Partager