Activer/désactiver bouton submit en fin du questionnaire

Version imprimable

Voir 40 message(s) de cette discussion en une page

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, 16h55
SpaceFrog

Code:

disabled=true ou false ;
14/03/2011, 17h55
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, 17h57
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, 18h26
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, 19h20
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, 07h01
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, 07h03
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, 09h44
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, 14h19
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, 14h22
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, 14h30
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, 15h24
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, 16h07
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, 16h09
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

Voir 40 message(s) de cette discussion en une page