Discussion :

[christophe_s46]

Bonjour,
Besoin d'un coup de pouce
j'ai fait un formulaire à choix multiple, et je souhaite dégriser le bouton de validation seulement lorsque toutes les questions à choix multiple ont été renseigné, j'y arrive en faisant un test avec des champs de type texte et checkbox, mais je n'y arrive pas avec les boutons radio, sans doute parce que pour une question, il y a 4 choix multiples, et j'ai l'impression qu'il faudrait ques les 4 choix soient cochés pour le dégriser.
Donc comment faire pour prendre en compte dans le controle qu'un bouton radio sur les 4


Dans le HEAD

Code :

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

1
2
3
4
5
6
7
8
 
 
<script type='text/javascript'>
function ChangeStatut(formulaire) {
if((formulaire.elements['ques_accueil'].checked==true)) && (formulaire.elements['ques_accueil'][2].checked==true)) && (formulaire.elements['ques_accueil'][3].checked==true)) && (formulaire.elements['ques_accueil'][4].checked==true)) && (formulaire.elements['regagree'].checked) && (formulaire.elements['pseudo'].value.length > 0)  && (formulaire.elements['email'].value.length > 0) && (formulaire.elements['motdepasse'].value.length > 0))
{formulaire.elements['validation'].disabled = false }
}
</script>

Le morceau du formulaire:

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
 
 
<form method="post" name="test">
Pseudo : <input type="text" name="pseudo" onclick="ChangeStatut(this.form)" /><br /><br />
Mot de passe : <input type="password" name="motdepasse" onclick="ChangeStatut(this.form)" />
<br /><br />
E-mail : <input type="text" name="email" onclick="ChangeStatut(this.form)" /><br /><br />
 
<br /><br />
 
Accueil téléphonique:
<INPUT type="radio" name="ques_accueil" onclick="ChangeStatut(this.form)" value="tres mauvais" />
<INPUT type="radio" name="ques_accueil" onclick="ChangeStatut(this.form)" value="mauvais" />
<INPUT type="radio" name="ques_accueil" onclick="ChangeStatut(this.form)" value="bon" />
<INPUT type="radio" name="ques_accueil" onclick="ChangeStatut(this.form)" value="tres bon" />
 
 
 
 
<br /><br />
 
<input type="checkbox" name="regagree" value="valeur" onclick="ChangeStatut(this.form)" /> J'accepte <br /><br />
<input type="submit" name="validation" value="S'inscrire" disabled="disabled" />
 
</form>

Si quelqu'un connait la solution pour gérer le controle desbouton radio comme pour le controle du type texte
Merci

[SpaceFrog]

|| au lieu de && ?

[christophe_s46]

Merci pour votre réponse, j'ai essayé ca:

Code :

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

1
2
3
4
5
6
7
 
<script type='text/javascript'>
function ChangeStatut(formulaire) {
if(((formulaire.elements['ques_accueil'].checked==true)) || (formulaire.elements['ques_accueil'][2].checked==true)) || (formulaire.elements['ques_accueil'][3].checked==true)) || (formulaire.elements['ques_accueil'][4].checked==true))) && (formulaire.elements['regagree'].checked) && (formulaire.elements['pseudo'].value.length > 0)  && (formulaire.elements['email'].value.length > 0) && (formulaire.elements['motdepasse'].value.length > 0))
{formulaire.elements['validation'].disabled = false }
}
</script>

Mais ca ne marche pas, je ne suis pas certain que "formulaire.elements['ques_accueil'][2].checked==true" soit la bonne syntaxe

[Bovino]

Mais ca ne marche pas, je ne suis pas certain que "formulaire.elements['ques_accueil'][2].checked==true" soit la bonne syntaxe

Euh... non, je dirais plutôt que c'est

Code :

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

(formulaire.elements['ques_accueil'].checked==true)

et

Code :

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

(formulaire.elements['ques_accueil'][4].checked==true)

Le premier correspond auquel des 4 ? (Ca peut te sembler évident, mais pour un naviagateur, c'est une autre histoire...) quant au 2e, sachant qu'un tableau JavaScript commence à l'index 0, l'index 4 correspond au 5e élément... qui n'existe pas

[christophe_s46]

Bonsoir, et merci
J'ai modifié

Code :

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

1
2
3
4
5
6
7
 
<script type='text/javascript'>
function ChangeStatut(formulaire) {
if(((formulaire.elements['ques_accueil'][0].checked==true)) || (formulaire.elements['ques_accueil'][1].checked==true)) || (formulaire.elements['ques_accueil'][2].checked==true)) || (formulaire.elements['ques_accueil'][3].checked==true))) && (formulaire.elements['regagree'].checked) && (formulaire.elements['pseudo'].value.length > 0)  && (formulaire.elements['email'].value.length > 0) && (formulaire.elements['motdepasse'].value.length > 0))
{formulaire.elements['validation'].disabled = false }
}
</script>

Mais ca ne marche toujours pas, si je mets qu'un bouton radio ca marche mais à partir de 2 ca ne fonctionne plus, ca coince pour différencier les boutons radios je pense, mais je ne sais pas comment faire
Merci

[Bovino]

Ouais, pas terrible cette syntaxe, mieux vaut passer par getElementsByName.
Pour un seul radio coché :

Code :

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

1
2
3
4
5
6
var a_tester = document.getElementsByName('ques_accueil');
var coche = 0;
for(var i=0; i<a_tester.length; i++){
    if(a_tester[i].checked){coche++}
}
formulaire.elements['validation'].disabled = coche != 1;

[emmanuel.remy]

Adapte la solution proposée par Bovino (si j'ai bien compris ce que tu veux faire...):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
function valideOptions(questionOption) {
    var a_tester = document.getElementsByName(questionOption);
    for(var i=0; i<a_tester.length; i++){
         if(a_tester[i].checked) return true;
    }
    return false;
}
 
function ChangeStatut(formulaire) {
    formulaire.elements['validation'].disabled =  (!valideOptions('ques_accueil') || !valideOptions('ques_autre'));
}

ERE

[christophe_s46]

Bonjour,
Emmanuel, merci pour votre réponse et votre aide,
J'ai inséré le code suivant dans la page, et lors de l'appuie sur le bouton envoyer et sans cocher les cases, il y a aucune alerte précisant qu'aucun choix a été effectuer, il doit me manque dans le formulaire l'appel de la fonction pour effectuer le controle,
Si vous pouviez m'aider
Merci

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script type='text/javascript'>
function valideOptions(questionOption) {
    var a_tester = document.getElementsByName(questionOption);
    for(var i=0; i<a_tester.length; i++){
         if(a_tester[i].checked) return true;
    }
    return false;
}
 
function ChangeStatut(formulaire) {
    formulaire.elements['validation'].disabled =  (!valideOptions('ques_accueil') || !valideOptions('ques_autre'));
}
</script>

[emmanuel.remy]

Ci-dessous le code que je te propose: c'est une possibilité vite faite mais fonctionnelle que tu peux (dois ?) adapter. J'ai essayé de conserver la démarche que tu avais initiée.

Tant que les champs ne sont pas remplis le bouton est désactivé.

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
51
52
53
54
55
56
57
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script type="text/javascript">
		function valideOptions(questionOption) {
		    var a_tester = document.getElementsByName(questionOption);
		    for(var i=0; i<a_tester.length; i++){
		         if(a_tester[i].checked) return true;
		    }
		    return false;
		}
 
		function ChangeStatut(frm) {
		    frm.elements['validation'].disabled =  (
                                   !valideOptions('ques_accueil') 
                               || !valideOptions('ques_adeq')
                               || (frm.pseudo.value.length==0)
                               || (frm.motdepasse.value.length==0)
                               || (frm.email.value.length==0)
                               || (frm.regagree.checked==false));
		}
	</script>
 
 
	<form method="post" name="test">
		Pseudo : <input type="text" name="pseudo" onkeyup="ChangeStatut(this.form)" onblur="ChangeStatut(this.form)" /><br /><br />
		Mot de passe : <input type="password" name="motdepasse" onkeyup="ChangeStatut(this.form)" onblur="ChangeStatut(this.form)" />
		<br /><br />
		E-mail : <input type="text" name="email" onkeyup="ChangeStatut(this.form)" onblur="ChangeStatut(this.form)" /><br /><br />
 
		<br /><br />
 
		Accueil téléphonique:
		<INPUT type="radio" name="ques_accueil" onclick="ChangeStatut(this.form)" value="tres mauvais" />
		<INPUT type="radio" name="ques_accueil" onclick="ChangeStatut(this.form)" value="mauvais" />
		<INPUT type="radio" name="ques_accueil" onclick="ChangeStatut(this.form)" value="bon" />
		<INPUT type="radio" name="ques_accueil" onclick="ChangeStatut(this.form)" value="tres bon" />
		<br /><br />
 
		Adéquation client:
		<INPUT type="radio" name="ques_adeq" onclick="ChangeStatut(this.form)" value="tres mauvais" />
		<INPUT type="radio" name="ques_adeq" onclick="ChangeStatut(this.form)" value="mauvais" />
		<INPUT type="radio" name="ques_adeq" onclick="ChangeStatut(this.form)" value="bon" />
		<INPUT type="radio" name="ques_adeq" onclick="ChangeStatut(this.form)" value="tres bon" />
		<br /><br />
 
	<input type="checkbox" name="regagree" value="valeur" onclick="ChangeStatut(this.form)" /> J'accepte <br /><br />
	<input type="submit" name="validation" value="S'inscrire" disabled="disabled" />
 
	</form>
</body>
</html>

ERE

[christophe_s46]

Merci beaucoup, ca marche très bien