Activer/désactiver bouton submit en fin du questionnaire [Résolu]

[superzero]

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

[SpaceFrog]

Code :

disabled=true ou false ;

[superzero]

Envoyé par SpaceFrog

Code :

disabled=true ou false ;

Bonjour

Merci de ta réponse

Pourrais-tu être plus précis stp ?

Merci

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

[superzero]

Envoyé par SpaceFrog

Code :

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]

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]

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

[Willpower]

Envoyé par SpaceFrog

Code :

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.

[Willpower]

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]

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

[Bovino]

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.

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]

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 :

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 :

1. 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)
2. le if porte sur une seule instruction while
3. le while porte sur une seule instruction de lecture/affectation
4. idem pour le else

[superzero]

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 :

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 :

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>

[superzero]

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

[Willpower]

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.

[Bovino]

Envoyé par Willpower

Au temps pour moi.

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

[Willpower]

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 ?

[superzero]

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()"/>

[Billy KiT]

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

[SpaceFrog]

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

non c'est juste une question de ligne à suivre