Activer/désactiver bouton submit en fin du questionnaire

Version imprimable

Bonjour

Je voudrais savoir comment faire pour activer le bouton submit "Valider" à la fin du questionnaire, lorsque l'utilisateur cliquera sur "Valider", il y aura un message qui le remercie d'avoir répondu aux questions et que le bouton "Valider" redevient grisé.

J'ai essayé pas mal de choses, je vous montre mon code JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function affiche_bouton(form1) 
{ 
	var isChecked=false;
	for (i=0; i<document.getElementsByTagName("input").length; i++)
	if (document.getElementsByTagName("input")[i].type=="radio")
	if (document.getElementsByTagName("input")[i].checked)
	isChecked=true;
	if (isChecked)
	{
		document.getElementById('submite').disabled='';
	} else {
		document.getElementById('submite').disabled='disabled';
		}
}
</SCRIPT>

Un extrait de mon source XHTML:

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
<p><b>Question 1 : blablablabla ?</b></p>
  <table width="500" border="1">
    <tr>
      <td><input type="radio" name="rep1" id="radio" value="radiobutton"  />
      Tr&egrave;s satisfait</td>
      <td><input type="radio" name="rep1" id="radio" value="radiobutton"  />
      Satisfait</td>
      <td><input type="radio" name="rep1" id="radio" value="radiobutton"  />
      Moyennement satisfait</td>
      <td><input type="radio" name="rep1" id="radio" value="radiobutton"  />
      Pas satisfait</td>
    </tr>
</table>
 
<p><b>Question 2 : blablablabla ?</b></p>
  <table width="500" border="1">
    <tr>
      <td><input type="radio" name="rep1" id="radio" value="radiobutton"  />
      Tr&egrave;s satisfait</td>
      <td><input type="radio" name="rep1" id="radio" value="radiobutton"  />
      Satisfait</td>
      <td><input type="radio" name="rep1" id="radio" value="radiobutton"  />
      Moyennement satisfait</td>
      <td><input type="radio" name="rep1" id="radio" value="radiobutton"  />
      Pas satisfait</td>
    </tr>
</table>
 
<input type="submit" name="button" value="Valider" id="submite" disabled="disabled" />

Mon problème, c'est que dès que j'ai répondu à la question 2, le bouton "Valider" reste grisé :s

Avez-vous une solution à ça svp ?

Merci de m'aider ;)

14/03/2011, 15h55
SpaceFrog

Code:

disabled=true ou false ;
14/03/2011, 16h55
superzero

Citation:

Envoyé par SpaceFrog

Code:

disabled=true ou false ;

Bonjour

Merci de ta réponse :D

Pourrais-tu être plus précis stp ? :aie:

Merci :ccool:
14/03/2011, 16h57
SpaceFrog
Code:

1 2 3 4 5 6 if (isChecked) { document.getElementById('submite').disabled=''; } else { document.getElementById('submite').disabled='disabled'; }
ben heu ... remplace '' par false et 'disabled par true ...

et pis si js retrouve ses petits dans ton code entre les for if et else sasn { } ...
14/03/2011, 17h26
superzero
Citation:
Envoyé par SpaceFrog

Code:

1 2 3 4 5 6 if (isChecked) { document.getElementById('submite').disabled=''; } else { document.getElementById('submite').disabled='disabled'; }

ben heu ... remplace '' par false et 'disabled par true ...

et pis si js retrouve ses petits dans ton code entre les for if et else sasn { } ...
Ça ne fonctionne toujours pas :s

Oui sans les { } parmi les for, if, else ça fonctionne, j'ai fait le test avec une case à cocher (dans une page de test). Mais là quand il s'agit de plusieurs boutons radios dans chaque question ca ne veut plus >.<
14/03/2011, 18h20
Bovino

En omettant les accolades de ta boucle for puis de tes if else imbriqués, tu laisses le navigateur extrapoler où mettre la fermeture de chaque bloc d'instructions...
Il faudrait toujours mettre les accolades.

Salut,

au lieu de ta variable isChecked utilise les variables nbQuestion et nbChecked.
Si nbChecked = nbQuestion, c'est que toutes les questions ont une réponse.
Code:

1 2 3 4 5 6 7 8 var nbQuestion = 2; //nombre de questions var nbChecked = 0; // nombre de questions répondues for (i=0; i<document.getElementsByTagName("input").length; i++) if (document.getElementsByTagName("input")[i].type=="radio") if (document.getElementsByTagName("input")[i].checked) nbChecked++; if (nbChecked == nbQuestion) { ...

15/03/2011, 06h01
Willpower
Citation:
Envoyé par SpaceFrog

Code:

1 2 3 4 5 6 if (isChecked) { document.getElementById('submite').disabled=''; } else { document.getElementById('submite').disabled='disabled'; }

ben heu ... remplace '' par false et 'disabled par true ...

et pis si js retrouve ses petits dans ton code entre les for if et else sasn { } ...
il me semble que le :

Code:

objectDOM.disabled="disabled";

est tout à fait correct.
15/03/2011, 06h03
Willpower

Citation:

Envoyé par Bovino

En omettant les accolades de ta boucle for puis de tes if else imbriqués, tu laisses le navigateur extrapoler où mettre la fermeture de chaque bloc d'instructions...
Il faudrait toujours mettre les accolades.

Il existe des règles très claires d'interprétation même sans accolades et son code est donc tout à fait correct même si son indentation le rend fort peu agréable à lire.

@superzero: voici déjà qqes corrections à apporter à ta source :

HTML:
-tes 2 groupes de question doivent porter des "name" différents.
-un "id" doit être unique
JAVASCRIPT:
-ne pas dupliquer inutilement les appels aux méthodes telles que "getElementsByTagName".
-pense à présenter ton code correctement (indentation) et 2 "if" imbriqués sans autre possibilité revient à mettre les 2 conditions dans un seul "if" liées par un "&&"
Code:

1 2 3 if(cond1) if(cond2) code..
revient à :
Code:

1 2 if(cond1 && cond2) code..
dans ton cas :
Code:

1 2 3 4 5 6 var isChecked=false; for (i=0; i<document.getElementsByTagName("input").length; i++) if (document.getElementsByTagName("input")[i].type=="radio") if (document.getElementsByTagName("input")[i].checked) isChecked=true;
revient à :
Code:

1 2 3 var isChecked=false, allInput=document.getElementsByTagName("input"); for (i=0; i<allInput.length && !isChecked; i++) isChecked = (allInput[i].type=="radio" && allInput[i].checked);
bon, maintenant on veut s'attaquer au vrai problème, tu voudrais que ton bouton "valider" se dégrise quand tu as répondu à toutes les questions, pour ce faire il faut vérifier à chaque modification(évènement) sur tes radio que la condition est remplie ou non. si tu gères effectivement ces évènements montre-nous de quelle manière tu t'y prends. (le code).

15/03/2011, 08h44
Bovino

Citation:

Envoyé par Willpower

il me semble que le :

Code:

objectDOM.disabled="disabled";

est tout à fait correct.

Oui et non... La valeur de la propriété JavaScript disabled, contrairement à celle de l'attribut HTML, est un booléen.
Alors effectivement, la notation donnée fonctionne, mais pas parce que tu indiques 'disabled', c'est parce que 'disabled' est une chaine de caractère non vide dont l'équivalent booléen est true. Note que ça marche pareil avec

Code:

objectDOM.disabled="toto";

ou

Code:

objectDOM.disabled=123456;

ce qui n'est pas forcément rigoureux.

Citation:

Envoyé par Willpower

Il existe des règles très claires d'interprétation même sans accolades et son code est donc tout à fait correct même si son indentation le rend fort peu agréable à lire.

Là encore, ce n'est pas tout à fait juste.
Effectivement, les navigateurs savent gérer les cas où les accolades sont manquantes, comme les cas où l'on oublie le ; à la fin d'une instruction.
Cela ne veut pas dire que les ; ou les accolades sont facultatifs, cela veut juste dire que l'interpréteur JavaScript pallie à ces erreurs.
Quant à l'exemple donné, avec imbrication d'une boucle for et de deux if sans accolade, en dehors du fait que c'est moins lisible, ça oblige le navigateur à définir comment sont délimités les différents blocs en fonction des règles définies, qui ne sont pas forcément les mêmes pour tous.

Citation:

Envoyé par Bovino

Quant à l'exemple donné, avec imbrication d'une boucle for et de deux if sans accolade, en dehors du fait que c'est moins lisible, ça oblige le navigateur à définir comment sont délimités les différents blocs en fonction des règles définies, qui ne sont pas forcément les mêmes pour tous.

:weird:
La règle est pourtant simple et commune à tous les langages de programmation qu'il m'a été donné de voir :
les if/for/while s'appliquent uniquement à l'instruction qui les suit directement, quelle qu'elle soit.

Si cette instruction est un bloc de code (délimité en javascript par des accolades {}) alors ce bloc de code est éxecuté si la condition est remplie. Si c'est une instruction "simple" (une instruction suivie d'un point-vrigule en javascript) alors cette instruction est éxecutée sur la condition est remplie.

Ce n'est en aucun cas aléatoire, quelque soit le langage. D'ailleurs il y'a deux écoles parmis les développeurs : ceux qui jugent préférable de mettre des blocs (accolades) systématiquement [j'en fais partie] pour désambigüer le code et ceux qui ne les mettent que quand c'est nécessaire.

En tout cas le code suivant marchera pareil sur tous les navigateurs et sera exécuté comme le sous-entend l'indentation :
Code:

1 2 3 4 5 6 7 8 9 var tableau = [[1,2],3,4]; var j = -1; var result = ""; for (var i = 0; i < tableau.length; i++) if (i = 0) while (++j < tableau[i].length) result += tableau[i][j]; else result += tableau[i];
Bon c'est juste un exemple que je viens d'inventer d'où le code assez moche (le j déclaré avant le for, le ++j dans le while) mais il n'est en aucun cas ambigü pour l'interpréteur javascript :

Le for porte sur l'instruction suivante : if/else (qui est considéré comme une seule instruction, ce qui n'aurait pas été le cas de 2 if)
le if porte sur une seule instruction while
le while porte sur une seule instruction de lecture/affectation
idem pour le else

Bonjour,

Merci pour vos réponses, c'est sympa :)

Citation:

HTML:
-tes 2 groupes de question doivent porter des "name" différents.

Oui, c'était un mauvais copier/coller :aie:

Voici mon code HTML complet :

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
div align="center"><h2>Questionnaire</h2></div>
<br>
<table width=85% cellspacing="0" cellpadding="4">
<tr style="background-color: #FDE355;">
<td>
<form name="form1" method="post" action="">
<table width=100% cellspacing="0" cellpadding="4">
<tr style="background-color: #F9C445;">
<td>
<p><b>Question 1 : blablablabla ?</b></p>
</td>
</tr>
</table>
  <table width="500" border="1">
    <tr>
      <td><input type="radio" name="rep1" id="radio" value="radiobutton"  />
      Tr&egrave;s satisfait</td>
      <td><input type="radio" name="rep1" id="radio" value="radiobutton"  />
      Satisfait</td>
      <td><input type="radio" name="rep1" id="radio" value="radiobutton"  />
      Moyennement satisfait</td>
      <td><input type="radio" name="rep1" id="radio" value="radiobutton"  />
      Pas satisfait</td>
    </tr>
</table>
<hr>
<table width=100% cellspacing="0" cellpadding="4">
<tr style="background-color: #F9C445;">
<td>
<p><b>Question 2 : blablablabla ?</b></p>
</td>
</tr>
</table>
  <table width="500" border="1">
    <tr>
      <td><input type="radio" name="rep2" id="radio" value="radiobutton" />
      Tr&egrave;s satisfait</td>
      <td><input type="radio" name="rep2" id="radio" value="radiobutton" />
      Satisfait</td>
      <td><input type="radio" name="rep2" id="radio" value="radiobutton" />
      Moyennement satisfait</td>
      <td><input type="radio" name="rep2" id="radio" value="radiobutton" />
      Pas satisfait</td>
    </tr>
</table>
<br>
<input type="submit" name="button" value="Valider" id="submite" disabled="disabled" />
</form>

Citation:

il faut vérifier à chaque modification(évènement) sur tes radio que la condition est remplie ou non. si tu gères effectivement ces évènements montre-nous de quelle manière tu t'y prends. (le code).

J'ai mis cette condition dans la boucle for.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
for (i=0; i<allInput.length && !isChecked; i++)
	{
		isChecked = (allInput[i].type="radio" && allInput[i].checked);
 
		if (isChecked == true)
			{
				document.getElementById('submite').disabled='';
			} 			
					else { document.getElementById('submite').disabled='disabled';
							}
 
	}

Ça n'a pas l'air de fonctionner :/ il y a quelque chose qui m'échappe.

Voici le JS complet :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function affiche_bouton(form1) 
{
	var nbQuestion = 0;
	//var nbChecked = 0;
	//var isChecked=false;
	var isChecked=false, allInput=document.getElementsByTagName("input");
	for (i=0; i<allInput.length && !isChecked; i++)
	{
		isChecked = (allInput[i].type="radio" && allInput[i].checked);
 
		if (isChecked == true)
			{
				document.getElementById('submite').disabled='';
			} 			
					else { document.getElementById('submite').disabled='disabled';
							}
 
	}
}
</SCRIPT>

Un grand merci à Billy KiT, ta solution fonctionne :)

Voici le code JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function affiche_bouton() 
{
	var nbQuestion = 2;
	var nbChecked = 0;
 
	for (i=0; i<document.getElementsByTagName("input").length; i++)
	if (document.getElementsByTagName("input")[i].type=="radio")
	if (document.getElementsByTagName("input")[i].checked)
 
		nbChecked++;
		if (nbChecked == nbQuestion)
		{
			document.getElementById('submite').disabled='';
		} else {
			document.getElementById('submite').disabled='disabled';
			}
}
</SCRIPT>

Extrait du code HTML :

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
<div id="questions"><p><b>Question 1 : blablablabla ?</b></p>
</td>
</tr>
</table>
  <table width="500" border="1">
    <tr>
      <br><td><input type="radio" name="rep1" id="radio" value="radiobutton" onclick="affiche_bouton()"/>
      Tr&egrave;s satisfait</td>
      <td><input type="radio" name="rep1" id="radio" value="radiobutton" onclick="affiche_bouton()"/>
      Satisfait</td>
      <td><input type="radio" name="rep1" id="radio" value="radiobutton" onclick="affiche_bouton()"/>
      Moyennement satisfait</td>
      <td><input type="radio" name="rep1" id="radio" value="radiobutton" onclick="affiche_bouton()"/>
      Pas satisfait</td>
    </tr>
</table>
</div>
<hr>
<table width=100% cellspacing="0" cellpadding="4">
<tr style="background-color: #F9C445;">
<td>
<div id="questions"><p><b>Question 2 : blablablabla ?</b></p>
</td>
</tr>
</table>
  <table width="500" border="1">
    <tr>
      <br><td><input type="radio" name="rep2" id="radio" value="radiobutton" onclick="affiche_bouton()"/>
      Tr&egrave;s satisfait</td>
      <td><input type="radio" name="rep2" id="radio" value="radiobutton" onclick="affiche_bouton()"/>
      Satisfait</td>
      <td><input type="radio" name="rep2" id="radio" value="radiobutton" onclick="affiche_bouton()"/>
      Moyennement satisfait</td>
      <td><input type="radio" name="rep2" id="radio" value="radiobutton" onclick="affiche_bouton()"/>
      Pas satisfait</td>
    </tr>
</table>
</div>

Et ça fonctionne :)

Merci beaucoup à tous !! Vous êtes les meilleurs :ccool:

15/03/2011, 13h19
Willpower

Citation:

Envoyé par Bovino

Oui et non... La valeur de la propriété JavaScript disabled, contrairement à celle de l'attribut HTML, est un booléen.
Alors effectivement, la notation donnée fonctionne, mais pas parce que tu indiques 'disabled', c'est parce que 'disabled' est une chaine de caractère non vide dont l'équivalent booléen est true. Note que ça marche pareil avec

Code:

objectDOM.disabled="toto";

ou

Code:

objectDOM.disabled=123456;

ce qui n'est pas forcément rigoureux.

Au temps pour moi. :oops:
15/03/2011, 13h22
Bovino

Citation:

Envoyé par Willpower

Au temps pour moi. :oops:

Bah, je peux en dire autant pour la suite de mon message que tu cites :aie:
15/03/2011, 13h30
Willpower

Citation:

Envoyé par superzero

Code:

if (isChecked == true)

Quelle abomination !

Code:

if(isChecked)

Sinon même si ton probleme est résolu, je ne comprend pas comment ton code fonctionne. À quel moment la fonction "afficher_bouton" est-elle appelée/exécutée ?
15/03/2011, 14h24
superzero

Citation:

Envoyé par Willpower

Quelle abomination !

Code:

if(isChecked)

Sinon même si ton probleme est résolu, je ne comprend pas comment ton code fonctionne. À quel moment la fonction "afficher_bouton" est-elle appelée/exécutée ?

Dans les boutons radios :

Code:

<input type="radio" name="rep1" id="radio" value="radiobutton" onclick="affiche_bouton()"/>

:)
15/03/2011, 15h07
Billy KiT

:ccool: c'est cool !
Je suis pas sûr que c'est bien de remplacer les 2 if consécutifs par un &&.
Même si le .checked sur un input autre que radio ou checkbox ne renvoie pas un erreur, on teste une propriété qui n'existe pas, ceci dit, cela retourne rien, donc false, bon ... avis aux spécialistes ...

Pour les accolades, ça condense l'écriture, ça marche (pareil je pense), mais 1 fois sur 1 environ, si on ajoute un else, on se mange.

Je me permets de rajouter que le "id" est un identifiant "unique" des objets de la page, il qu'il ne doit pas se retrouver en double (ou plus), mais je pense qu'il résulte d'un copier/coller intempestif. De plus il ne t'est pas nécessaire.

Bonne continuation ...
15/03/2011, 15h09
SpaceFrog

Citation:

mais 1 fois sur 1 environ, si on ajoute un else, on se mange.

non c'est juste une question de ligne à suivre

Citation:

Envoyé par Billy KiT

Pour les accolades, ça condense l'écriture, ça marche (pareil je pense), mais 1 fois sur 1 environ, si on ajoute un else, on se mange.

On se "mange" seulement quand on ne sait pas ce qu'on fait. Un compilateur ne fait pas de la ratatouille avec le code qu'on écrit... Si on écrit deux fois la même chose, il fera deux fois la même chose.

Déjà une bonne habitude à prendre est d'indenter correctement son code (en tout cas c'est une très mauvaise habitude que de ne pas le faire). Ca aide celui qui écrit à relire son code et, dans le cas précis, ça aiderait ceux qui essaye de t'aider de comprendre ce que tu crois que ton code fait.

En l'état ton code fait ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function affiche_bouton() { var nbQuestion = 2; var nbChecked = 0; for (i=0; i<document.getElementsByTagName("input").length; i++) if (document.getElementsByTagName("input")[i].type=="radio") if (document.getElementsByTagName("input")[i].checked) nbChecked++; if (nbChecked == nbQuestion) { document.getElementById('submite').disabled=''; } else { document.getElementById('submite').disabled='disabled'; } }
Et dans le cas présent tu peux totalement remplacer tes 2 ifs par un seul avec un &&.

15/03/2011, 16h16
superzero

J'ai indenté justement après avoir mis mon source tout à l'heure :)

C'est vrai que j'ai fait ça un peu rapidement, ça arrive d'oublier certaines choses essentielles quand on est pressé ^^.

Citation:
Envoyé par Loceka
On se "mange" seulement quand on ne sait pas ce qu'on fait. Un compilateur ne fait pas de la ratatouille avec le code qu'on écrit... Si on écrit deux fois la même chose, il fera deux fois la même chose.

Déjà une bonne habitude à prendre est d'indenter correctement son code (en tout cas c'est une très mauvaise habitude que de ne pas le faire). Ca aide celui qui écrit à relire son code et, dans le cas précis, ça aiderait ceux qui essaye de t'aider de comprendre ce que tu crois que ton code fait.

En l'état ton code fait ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function affiche_bouton() { var nbQuestion = 2; var nbChecked = 0; for (i=0; i<document.getElementsByTagName("input").length; i++) if (document.getElementsByTagName("input")[i].type=="radio") if (document.getElementsByTagName("input")[i].checked) nbChecked++; if (nbChecked == nbQuestion) { document.getElementById('submite').disabled=''; } else { document.getElementById('submite').disabled='disabled'; } }
Et dans le cas présent tu peux totalement remplacer tes 2 ifs par un seul avec un &&.
tu répètes exactement tout ce que j'ai dis 11 messages plus tôt

Enfin, c'est plutôt bon signe, au moins nous sommes d'accord. ;)

15/03/2011, 22h14
Billy KiT
:cry: ne vous fâchez pas ! Je suis d'accord avec vous.
Qui va me dire qu'à première vue, dans le code suivant, on va avoir l'alerte a!=1 alors que a=1
Code:

1 2 3 4 5 6 7 a = 1; b = 2; if (a==1) if (b==1) alert ('b=1'); else alert ('a!=1');
C'était un simple conseil sans prétention d'un membre non chevronné. Je vois que l'image vous a fait sursauter, désolé. J'ai vu des erreurs bien plus c.. sournoises.
16/03/2011, 08h18
SpaceFrog

si encore les accolades {}étaient payantes, je comprendrais qu'on en fasse l'economie ...
mais elle sont gratuites alors n'hésitez pas utilisez les pareil pour les ;
16/03/2011, 12h08
Willpower
Citation:

Envoyé par SpaceFrog

si encore les accolades {}étaient payantes, je comprendrais qu'on en fasse l'economie ...
mais elle sont gratuites alors n'hésitez pas utilisez les pareil pour les ;

parfois, le code est tellement "simple et lisible" que je ne les mets pas mais dès qu'il y a un doute sur la lisibilité, il est évident de les mettre vu leurs gratuité^^

par exemple dans des cas comme celui-là, je ne les mets pas tjs :
Code:

1 2 3 4 5 6 7 8 FUNCTION(){ BOUCLE{ IF(CONDITION) RETURN; EXECUTION_DE_CODE; } RETURN; }