Activer/désactiver bouton submit en fin du questionnaire

**superzero** · 14/03/2011, 15h53

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 :

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
<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 :

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
<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

**SpaceFrog** · 14/03/2011, 15h55

Code :

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

disabled=true ou false ;

**superzero** · 14/03/2011, 16h55

Envoyé par SpaceFrog

Code :

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

disabled=true ou false ;

Bonjour

Merci de ta réponse

Pourrais-tu être plus précis stp ?

Merci

**SpaceFrog** · 14/03/2011, 16h57

Code :

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

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 { } ...

**superzero** · 14/03/2011, 17h26

Envoyé par SpaceFrog

Code :

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

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 >.<

**Bovino** · 14/03/2011, 18h20

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.

**Billy KiT** · 14/03/2011, 22h50

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 :

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

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) { ...

**Willpower** · 15/03/2011, 06h01

Envoyé par SpaceFrog

Code :

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

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 :

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

objectDOM.disabled="disabled";

est tout à fait correct.

**Willpower** · 15/03/2011, 06h03

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.

**Willpower** · 15/03/2011, 06h24

@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 :

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

1
2
3
if(cond1)
  if(cond2)
    code..

revient à :

Code :

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

1
2
if(cond1 && cond2)
  code..

dans ton cas :

Code :

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

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 :

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

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).

**Bovino** · 15/03/2011, 08h44

Envoyé par Willpower

il me semble que le :

Code :

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

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 :

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

objectDOM.disabled="toto";

ou

Code :

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

objectDOM.disabled=123456;

ce qui n'est pas forcément rigoureux.

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.

**Loceka** · 15/03/2011, 09h03

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.

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 :

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

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

**superzero** · 15/03/2011, 09h12

Bonjour,

Merci pour vos réponses, c'est sympa

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

Oui, c'était un mauvais copier/coller

Voici mon code HTML complet :

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
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>

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 :

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

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 :

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
<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>

**superzero** · 15/03/2011, 13h06

Un grand merci à Billy KiT, ta solution fonctionne

Voici le code JS :

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
<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 :

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
<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

**Willpower** · 15/03/2011, 13h19

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 :

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

objectDOM.disabled="toto";

ou

Code :

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

objectDOM.disabled=123456;

ce qui n'est pas forcément rigoureux.

Au temps pour moi.

**Bovino** · 15/03/2011, 13h22

Envoyé par Willpower

Au temps pour moi.

Bah, je peux en dire autant pour la suite de mon message que tu cites

**Willpower** · 15/03/2011, 13h30

Envoyé par superzero

Code :

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

if (isChecked == true)

Quelle abomination !

Code :

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

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 ?

**superzero** · 15/03/2011, 14h24

Envoyé par Willpower

Quelle abomination !

Code :

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

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 :

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

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

**Billy KiT** · 15/03/2011, 15h07

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 ...