Activer bouton en fonction de plusieurs radiobutton

Version imprimable

Bonjour,

Je suis en train de créer un questionnaire en html comportants plusieurs question avec 4 possibilités de réponses, chaque questions doit n'avoir qu'une seul réponse.

Une fois chaque question répondue l'utilisateur devra appuyer sur un bouton pour valider les réponses.

Ce que je souhaiterai faire, c'est que tant que chaques question n'a pas de réponse que le bouton soit désactivé.

Pour cela j'ai mis en place le code suivant, mais mon algorythme ne marche pas vraiment comme je le souhaite, en effet il active le bouton quand au moins un radiobutton est coché !

Code Javascript :

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
<script type="text/javascript">
function affiche_bouton() 
{ 
	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>

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
 
<form action="script/scriptRadar.php" method="post"> 
     <input type="hidden" id="f_sent" name="f_sent" value="1">
	<table>
	     <tr>
		<td>Question 1 :</td>
		<td>A<input type="radio" name="1" id="1"  value="4" onclick="affiche_bouton()"/></td>
	           <td>B<input type="radio" name="1" id="1"  value="3" onclick="affiche_bouton()"/></td>
		<td>C<input type="radio" name="1" id="1"  value="2" onclick="affiche_bouton()"/></td>
		<td>D<input type="radio" name="1" id="1"  value="1" onclick="affiche_bouton()"/></td>
		<td>E<input type="radio" name="1" id="1"  value="0" onclick="affiche_bouton()"/></td>
	</tr>
            <tr>
		<td>Question 2 :</td>
		<td>A<input type="radio" name="2" id="2" value="4" onclick="affiche_bouton()"/></td>
	           <td>B<input type="radio" name="2" id="2" value="3" onclick="affiche_bouton()"/></td>
		<td>C<input type="radio" name="2" id="2" value="2" onclick="affiche_bouton()"/></td>
		<td>D<input type="radio" name="2" id="2" value="1" onclick="affiche_bouton()"/></td>
		<td>E<input type="radio" name="2" id="2" value="0" onclick="affiche_bouton()"/></td>
	</tr>
</table>                          
<input type="reset" name="Reset" value="Effacer">
<input type="submit" name="button" value="Envoyer" id="submite" disabled="disabled" />
</form>

Si quelqu'un pouvait m'éclairer, se serait sympa !

Merci d'avance :ccool:

vérifier si des boutons radios sont cochés

Salut,

je te laisse analyser le code suivant :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>vérifier si des boutons radios sont cochés</title>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   </style>
</head>
<body>
  <form id="f" action="p.html" method="post">
    <fieldset>
      <legend>r1</legend>
      <p><label for="r10">r10</label><input id="r10" name="r1" type="radio" value="0" /></p>
      <p><label for="r11">r11</label><input id="r11" name="r1" type="radio" value="1" /></p>
      <p><label for="r12">r12</label><input id="r12" name="r1" type="radio" value="2" /></p>
      <p><label for="r13">r13</label><input id="r13" name="r1" type="radio" value="3" /></p>
    </fieldset>
    <fieldset>
      <legend>r2</legend>
      <p><label for="r20">r20</label><input id="r20" name="r2" type="radio" value="0" /></p>
      <p><label for="r21">r21</label><input id="r21" name="r2" type="radio" value="1" /></p>
      <p><label for="r22">r22</label><input id="r22" name="r2" type="radio" value="2" /></p>
      <p><label for="r23">r23</label><input id="r23" name="r2" type="radio" value="3" /></p>
    </fieldset>
    <button id="b" type="submit" value="v">valider</button>
  </form>
  <script type="text/javascript">
    document.getElementById("b").onclick=function(){
      var r = ["r1","r2"];
      for(var i=0,imax=r.length;i<imax;i++){
        var flag = false;
        var elms = document.getElementsByName(r[i]);
        for(var j=0,jmax=elms.length;j<jmax;j++){
          if(elms[j].checked){flag=true;}
        }
        if(!flag){return false;}
      }
      return true;
    }
  </script>
</body>
</html>

11/06/2009, 16h41
Invité

Merci je vais me pencher dessus :ccool:

Quelque chose qui répond un peu mieux à ta demande :

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>activer un bouton si le formulaire est correctement saisi</title>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   </style>
</head>
<body>
  <form id="f" action="p.html" method="post">
    <fieldset>
      <legend>r1</legend>
      <p><label for="r10">r10</label><input id="r10" name="r1" type="radio" value="0" /></p>
      <p><label for="r11">r11</label><input id="r11" name="r1" type="radio" value="1" /></p>
      <p><label for="r12">r12</label><input id="r12" name="r1" type="radio" value="2" /></p>
      <p><label for="r13">r13</label><input id="r13" name="r1" type="radio" value="3" /></p>
    </fieldset>
    <fieldset>
      <legend>r2</legend>
      <p><label for="r20">r20</label><input id="r20" name="r2" type="radio" value="0" /></p>
      <p><label for="r21">r21</label><input id="r21" name="r2" type="radio" value="1" /></p>
      <p><label for="r22">r22</label><input id="r22" name="r2" type="radio" value="2" /></p>
      <p><label for="r23">r23</label><input id="r23" name="r2" type="radio" value="3" /></p>
    </fieldset>
    <button id="b" type="submit" value="v" disabled="disabled">valider</button>
  </form>
  <script type="text/javascript">
  <!--
  var FC = {
    Evenement: {
      ajouter: function(elm, evt, fn) {
        if (document.addEventListener) {
          if (elm.nodeType===1 || elm.nodeType===9) {
            elm.addEventListener(evt, function(e) {
              if (!fn(e)) { e.preventDefault(); }
            }, false);
          } else {
            for (var i = 0, imax = elm.length; i < imax; i++) {
              elm[i].addEventListener(evt, function(e) {
                 if (!fn(e)) { e.preventDefault(); }
              }, false);
            }
          }
        } else if (document.attachEvent) {
          if (elm.nodeType===1 || elm.nodeType===9) {
            return elm.attachEvent("on" + evt, fn);
          } else {
            for (var i = 0, imax = elm.length; i < imax; i++) {
              elm[i].attachEvent("on" + evt, function(e) {
                if (!fn(e)) { e.returnValue = false; }
              });
            }
          }
        }
      }
    }
  };
 
  FC.Evenement.ajouter(document.getElementsByTagName("input"), "click", function(e) {
    var elm = e.target || event.srcElement;
    if(elm.type=="radio"){
      var r=["r1","r2"];
      for(var i=0,imax=r.length;i<imax;i++){
        var flag = false;
        var elms = document.getElementsByName(r[i]);
        for(var j=0,jmax=elms.length;j<jmax;j++){
          if(elms[j].checked){flag=true;}
        }
        if(!flag){return false;}
      }
      document.getElementById("b").disabled=false;
    }
  });
  //-->
  </script>
</body>
</html>

11/06/2009, 17h47
Invité

Merci pour tes codes sources, mais je ne comprend vraiment pas comment marche le script du dernier exemple :oops: et de plus lorsque tu coche un radio button tu ne peut plus cocher un du même groupe !

Sinon si tu pouvai me donner plus d'explication sur le javascript utilisé car j'avourai que je suis un peu perdu étant donné mon niveau en javascript (débutant)

Merci

activer un bouton si le formulaire est correctement saisi

Voici une version commentée, avec une petite résolution de bug pour IE :

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>activer un bouton si le formulaire est correctement saisi</title>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   </style>
</head>
<body>
  <form id="f" action="p.html" method="post">
    <fieldset>
      <legend>r1</legend>
      <p><label for="r10">r10</label><input id="r10" name="r1" type="radio" value="0" /></p>
      <p><label for="r11">r11</label><input id="r11" name="r1" type="radio" value="1" /></p>
      <p><label for="r12">r12</label><input id="r12" name="r1" type="radio" value="2" /></p>
      <p><label for="r13">r13</label><input id="r13" name="r1" type="radio" value="3" /></p>
    </fieldset>
    <fieldset>
      <legend>r2</legend>
      <p><label for="r20">r20</label><input id="r20" name="r2" type="radio" value="0" /></p>
      <p><label for="r21">r21</label><input id="r21" name="r2" type="radio" value="1" /></p>
      <p><label for="r22">r22</label><input id="r22" name="r2" type="radio" value="2" /></p>
      <p><label for="r23">r23</label><input id="r23" name="r2" type="radio" value="3" /></p>
    </fieldset>
    <button id="b" type="submit" value="v" disabled="disabled">valider</button>
  </form>
  <script type="text/javascript">
  <!--
  var FC = {
    Evenement: {
      ajouter: function(elm, evt, fn) { // fonction écrite pour attacher n'importe quel évènement, n'importe sur le document (permet de faire du javascript non-intrusif)
        if (document.addEventListener) {
          if (elm.nodeType===1 || elm.nodeType===9) {
            elm.addEventListener(evt, function(e) {
              if (!fn(e)) { e.preventDefault(); }
            }, false);
          } else {
            for (var i = 0, imax = elm.length; i < imax; i++) {
              elm[i].addEventListener(evt, function(e) {
                 if (!fn(e)) { e.preventDefault(); }
              }, false);
            }
          }
        } else if (document.attachEvent) {
          if (elm.nodeType===1 || elm.nodeType===9) {
            return elm.attachEvent("on" + evt, fn);
          } else {
            for (var i = 0, imax = elm.length; i < imax; i++) {
              elm[i].attachEvent("on" + evt, function(e) {
                if (!fn(e)) { e.returnValue = false; }
              });
            }
          }
        }
      }
    }
  };
 
  FC.Evenement.ajouter(document.getElementsByTagName("input"), "click", function(e) { // e est l'évènement déclenché
    var elm = e.target || event.srcElement; // on cherche l'élément qui a déclenché l'évènement (event pour IE qui ne récupère pas e)
    if(elm.type==="radio"){ // si l'élément est du type "radio" on agit, on peut aussi tester l'attribut "name" directement
      var r=["r1","r2"]; // je définis un tableau contenant les "names" qui m'intéressent
      for(var i=0,imax=r.length;i<imax;i++){ // on boucle sur toutes les familles de "radios" (qui ont le même attribu "name"
        var flag = false; // à chaque parcours d'une famille on définit à "faux" un booléen qu'on testera plus tard
        var elms = document.getElementsByName(r[i]); // on boucle sur tous les "radio" d'une famille
        for(var j=0,jmax=elms.length;j<jmax;j++){
          if(elms[j].checked){flag=true;} // si un bouton "radio" est coché on passe le booléen à "vrai"
        }
        if(!flag){break;} // si dans une famille aucun bouton n'est coché, ce n'est pas la peine de continuer à tester les autres familles on sort donc de la boucle, sinon on continue
      }
      if(flag) {document.getElementById("b").disabled=false;} // si le booléen est "vrai" c'est qu'on a parcouru toutes les familles et qu'un bouton rédio a été coché dans chaque famille
      return true; // on retourne vrai pour permettre à IE de cocher les boutons, sinon il les bloque. C'est dû à la fonction ajouter()
    }
  });
  //-->
  </script>
</body>
</html>

11/06/2009, 19h12
Invité

Merci pour tes précieuses informations, et tes commentaires j'ai compris le principe de la chose :D

:ccool: