Controle de formulaire

Version imprimable

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:

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:

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

12/03/2009, 21h53
SpaceFrog

|| au lieu de && ?

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

Code:

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

12/03/2009, 22h43
Bovino

Citation:

Envoyé par christophe_s46

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:

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

et

Code:

(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 ;)

Bonsoir, et merci
J'ai modifié

Code:

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

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

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;

je vais tester, mais

Merci, mais je sais pas comment intégrer ce code à mon formulaire :?
J'ai fait comme ca:

Code:

1
2
3
4
5
6
7
8
9
10
 
<script type='text/javascript'>
 
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;
</script>

Mais ca ne donne rien

Il suffit juste d'adapter dans la fonction...

Code:

1
2
3
4
5
6
7
8
function ChangeStatut(formulaire) {
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;
}

13/03/2009, 01h07
christophe_s46

Ca marche

Merci ca marche,
mais je complique les choses :?
Ca c'était la 1er question à choix multibles, mais s'il y a une 2ème question avec pareil 4 choix possibles, donc un choix sélectionné a chaque question pour dégriser le bouton
je dois rajouter une 2ème variable par exemple a_tester2 et coche2, et à la fin "formulaire.elements['validation'].disabled = coche && coche2 != 1;" ?
16/03/2009, 00h12
christophe_s46

re

Bonsoir,
Personne peut m'aider ? Comment faire lorsqu'il y a plusieurs questions à choix multiples ?
Merci

Adapte

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

Code:

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

Bonjour

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:

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>

Exemple

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:

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

31/08/2009, 12h19
christophe_s46

Ca marche

Merci beaucoup, ca marche très bien