Verification d'un bouton radio

par **Manou** » 12 avr. 2006, 17:21

-> Invité

Merci pour ta reponse. Mais est-il possible dde laisser un type="radio" au lieu de mettre type "buuton" comme tu l'as suggere?

par **Invité** » 10 avr. 2006, 23:00

- > Snoops

Merci pour ton aide Snoops. Ce que je veux faire c'est que j'ai des lignes qui correspondent a des questions et pour chaque question j'ai un choix a faire entre 7 possibilites et a la fin je dois verifier si l'utilisateur a bien choisi une reponse parmi les 7 pour chaque question. Dans l'exemple, je n'ai donne que 2 questions et un choix a faire parmi 7. Donc je veux faire en sorte que je verifie s'il y a bien choisi une case parmi les 7 et ceci pour un nombre important de questions. Ma question donc est comment le faire de maniere automatique.

Voila le probleme, j'espere qu'il est plus clair maintenant.

Merci a vous!

Salut,
Je suppose qu'en fait c'est un QCM que tu désire réaliser, nan?
Bien, tu as deux possibilités :
- soit tu as une base de données qui contient toutes tes questions et réponses (ce que j'espère... imagine que tu es 1000 questions et donc 7 fois plus de réponses ...)
- soit tu tapes tout en dur ... (ce que je n'espere pas pour toi)

mais peu importe la solution que tu as choisis, tu peux réaliser ce que tu souhaites.
J'aurais juste une question : affiches tu toutes tes questions sur la même page ?
Si ce n'est pas le cas ca complique un peu ! (et dans ce cas je te dirais comment faire)

( PS : Alors désolé je vais abréger mais je passe mon exam dans un mois et j'ai un mémoire à terminer, donc si tout n'est pas parfait, je m'excuse de ne pas avoir plus de temps à l'avance )

chaque question sera nommée admettons : "question_X" où X est le numéro de la question (commencant a 0), donc chaque bouton radio étant une réponse possible à la question, s'appellera 'reponse_X".

Tu sais que pour chaque question tu as 7 réponses obligatoirement (d'après ce que tu m'as dit), donc il te suffit juste de dire a javascript combien de questions tu as :
- soit tu le mets en dur, mais à chaque fois que ca change tu dois aller modifier le code ...
- soit, et uniquement si tu as une BDD, tu fais une requete qui calcul le nombre de questions que tu as.

A la fin de toutes tes questions tu fais un bouton de "validation" du formulaire les contenant associé à l'évènement onclick qui permettra de faire vérifier par javascript tes boutons :

Code : Tout sélectionner

<input type="button" name="valider" value="Valider" onclick="verifCheck(nb_questions);">

où nb_questions correspondra soit à ta variable créée avec le lien de ta base de données, soit au chiffre que tu mettras en dur entre quotes : 'X'

Enfin tu créer la fonction JS qui vérifiera que toutes les questions ont bien une réponse :

Code : Tout sélectionner

function verifCheck (nb_questions)
{
     var trouve = false;    // correspond au booléen qui permettra de savoir si au moins une question n'a pas de réponse
     var au_moins_une_case_cochee = false;
     var reponse;
     var champ = document.forms['f'];
     var i = 0;
     var j = 0;
     while (trouve == false && i < nb_questions)
     {
          au_moins_une_case_cochee = false;
          while (au_moins_une_case_cochee == false && j < 7)
          {
               reponse = "reponse_" + j;
               if (champ.element[reponse].checked == true)
               {
                    au_moins_une_case_cochee = true;
               }
               j++;
          }
          if (au_moins_une_case_cochee == false)
          {
               trouve = true;
               question = i + 1;
               alert ("La question n° " + question + " n'a pas de réponse, veuillez y répondre avant de continuer !");
          }
          i++;
     } 
}

Bon voilà normalement ca devrait fonctionner, mais je n'ai pas vérifier, donc si quelque chose ne fonctionne pas ou que tu ne comprends pas, demande j'essayerais de résoudre / expliquer.

Bonne nuit à tous!

par **Manou** » 10 avr. 2006, 13:14

- > Snoops

Merci pour ton aide Snoops. Ce que je veux faire c'est que j'ai des lignes qui correspondent a des questions et pour chaque question j'ai un choix a faire entre 7 possibilites et a la fin je dois verifier si l'utilisateur a bien choisi une reponse parmi les 7 pour chaque question. Dans l'exemple, je n'ai donne que 2 questions et un choix a faire parmi 7. Donc je veux faire en sorte que je verifie s'il y a bien choisi une case parmi les 7 et ceci pour un nombre important de questions. Ma question donc est comment le faire de maniere automatique.

Voila le probleme, j'espere qu'il est plus clair maintenant.

Merci a vous!

par **Snoops** » 07 avr. 2006, 22:01

Déjà il faut que tu sache que tu ne peut cocher qu'un seul bouton radio par groupe portant le même nom. Ce qui n'est pas clair puisque dans ta fonction JS, si une case n'est pas cochée tu mets une alerte qui spécifie à l'utilisateur de tout cocher... (moi je pensais que tu avais mis des cases à cocher, et non des boutons radio)
De plus pour envoyer vers la fonction JS, ton bouton doit etre de type = "button" si tu le laisse en submit, il soumettra le formulaire sans passer par ta fonction.
Aussi, dans la déclaration de la fonction dans le bouton, tu dois mettre un OnClick et non un OnSubmit, et entre parenthèse spécifier, la valeur que tu veux transmettre à ta fonction, donc dans ton cas se serait plutôt OnClick = "VerifCheck('m1');"
Si tu ne mets pas de simple quote, c'est comme si tu spécifiais une variable (ce qui n'existe pas en html) donc tu ne peux pas mettre juste VerifCheck(nom).
La déclaration ainsi faite, se fait lorsque tu crées la fonction entre les balises <script>...</script>, la tu spécifie le nom de la variable contenant la valeur envoyée par le bouton, soit dans ton cas : m1.
Enfin le OnSubmit que tu as mis dans la balise form ne sert à rien.

Si j'ai dit quelque chose de pas très clair, ou de faux, n'hésitez pas à corriger !

et pour toi Manou, ce serait bien d'expliquer plus clairement ce que tu veux faire, et non ce que tu fais, pour que l'on puisse te guider de facon plus simple, et sans hors sujet.

++

par **Manou** » 06 avr. 2006, 17:01

-> Snoops

J'ai essaye ce code en tenant compte de ta remarque mais ca ne marche pas. Je crois qu'il y a une erreur kelke part. Si quelqu'un peut m'aider a faire fonctionner ce programme :

<html>
<head>
<script language="javascript" type="text/javascript">
function VerifCheck(nom)
{
var champ = document.forms['f'].elements[nom];
for (var i = 0; i < champ.length; i++)
    {
        if (champ.options[i].checked == false)
        {
               alert ('Cochez toutes les cases SVP');
        }
    }
}
</script>
</head>
<body>
<form name="f" method="post" action="page02.php" onsubmit="return VerifCheck(nom);">
<table border="0" align="center" width="75%" cellpadding="15" cellspacing="0"><br>
<tr>
  <td width="162">
  <b>Heureux (se). </b>  </td>
  <td width="35" colpsan="1">
  <input value="1" type="radio" id="m1_1" name="m1" ><label for="m1_1">1</label>
  </td>
  <td width="25" colpsan="1">
  <input value="2" type="radio" id="m1_2" name="m1" ><label for="m1_2">2</label>
  </td>
  <td width="31" colpsan="1">
  <input value="3" type="radio" id="m1_3" name="m1" ><label for="m1_3">3</label>
  </td>
  <td width="20" colpsan="1">
  <input value="4" type="radio" id="m1_4" name="m1" ><label for="m1_4">4</label>
  </td>
  <td width="20" colpsan="1">
  <input value="5" type="radio" id="m1_5" name="m1" ><label for="m1_5">5</label>
  </td>
  <td width="20" colpsan="1">
  <input value="6" type="radio" id="m1_6" name="m1"><label for="m1_6">6</label>
  </td>
  <td width="20" colpsan="1">
  <input value="7" type="radio" id="m1_7" name="m1" ><label for="m1_7">7</label>
  </td>
</tr>
</table>
<br>
<input type="submit" value="Vérifier" onsubmit="VerifCheck(m1);">
</body>
</html>

par **Snoops** » 04 avr. 2006, 18:31

-> Unknown

Oui je sais que c'est un test pour voir si toutes les cases sont cochées. Mais ce qui m'interesse c'est de faire un truc optimisé pour les varaibles m. Si j'ai plusieurs varaibles m comment faire pour optimiser la verifications?

1) Désolé je n'avais pas vu la deuxième variable m2, mais j'avais optimsé de facon que l'utilisateur puisse cocher toutes ses cases, puis lors du click sur un bouton vérifier...

Et pourrais tu m'expliquer plus exactement ce que tu veux faire stp, parce que je ne suis pas sur de bien avoir compris?
Pour etre sur que je ne fasses pas hors sujet ...

2) Connais tu a l'avance le nombre de variables m que tu auras ? et est-ce toujours la même facon de les appelées? m1, m2, m3 ... ?

Si oui au 2 questions ca devrait te donner ça (normalement) :

- Si tu as un bouton pour chacun des groupes de cases :

Code : Tout sélectionner

<script language="javascript" type="text/javascript"> 
function VerifCheck(nom) 
{ 
    var formulaire = document.forms['f'].elements[nom]; 
    for (var i = 0; i < formulaire.length; i++) 
    { 
        if (formulaire.options[i].checked == false) 
        { 
               alert ('Cochez toutes les cases SVP'); 
        } 
    } 
} 
</script>

et ton bouton :

Code : Tout sélectionner

<input type="button" value="Vérifier" onclick="VerifCheck(mX);">

(où X = le numéro du groupe de cases)

par **Manou** » 04 avr. 2006, 17:23

-> Unknown

Oui je sais que c'est un test pour voir si toutes les cases sont cochées. Mais ce qui m'interesse c'est de faire un truc optimisé pour les varaibles m. Si j'ai plusieurs varaibles m comment faire pour optimiser la verifications?

par **Unknow** » 04 avr. 2006, 17:17

Bonjour

il teste dans une boucle si une des cases est coché si je ne m'abuse.

@+

par **Manou** » 04 avr. 2006, 16:05

-> Snoops

Merci pour ton aide. Mais a ce moment la suis-je oblige de toujours mettre ce code dans input :
onClick="this.form.radiom2.value = this.value;" (par exple)

car sinon je vois pas ou tu as optimise le code de Dgse?

Thanks!

par **Snoops** » 04 avr. 2006, 14:58

-> Dgse

Merci bcp pour ton aide. C'est simple et ca marche !

en reprenant le code de Dgse mais en l'optimisant (si tu as 100 boutons tu ne vas pas faire 100 fois la même ligne de code, si?) :

Code : Tout sélectionner

<script language="javascript" type="text/javascript">
function VerifCheck()
{
    var formulaire = document.forms['f'].elements['m1'];
    for (var i = 0; i < formulaire.length; i++)
    {
        if (formulaire.options[i].checked == false)
        {
               alert ('Cochez toutes les cases SVP');
        }
    }
}
</script>

Je n'ai pas vérifier mais ca devrait etre quelque chose comme ca.

par **Manou** » 04 avr. 2006, 12:18

-> Dgse

Merci bcp pour ton aide. C'est simple et ca marche !

par **Dgse** » 03 avr. 2006, 18:37

Bonjour

Da la meme maniere que le 1er

<html> 
<head> 
<script language="javascript" type="text/javascript"> 
function VerifCheck() 
{ 
if(document.f.radiom1.value == "") 
        { 
        alert ('Cochez toutes les cases SVP'); 
         return false; 
        }
if(document.f.radiom2.value == "") 
        { 
        alert ('Cochez toutes les cases SVP'); 
         return false; 
        }  
else {return true;} 
} 
</script> 
</head> 
<body> 
<form name="f" method="post" action="page02.php" onsubmit="return VerifCheck();"> 

<table border="0" align="center" width="75%" cellpadding="15" cellspacing="0"><br> 
<tr> 
  <td width="162"> 
  <b>Heureux (se). </b>  </td> 
  <td width="35" colpsan="1"> 
  <input value="1" type="radio" id="m1_1" name="m1" onClick="this.form.radiom1.value = this.value; "><label for="m1_1">1</label> 
  </td> 
  <td width="25" colpsan="1"> 
  <input value="2" type="radio" id="m1_2" name="m1" onClick="this.form.radiom1.value = this.value;"><label for="m1_2">2</label> 
  </td> 
  <td width="31" colpsan="1"> 
  <input value="3" type="radio" id="m1_3" name="m1" onClick="this.form.radiom1.value = this.value;;"><label for="m1_3">3</label> 
  </td> 
  <td width="20" colpsan="1"> 
  <input value="4" type="radio" id="m1_4" name="m1" onClick="this.form.radiom1.value = this.value;"><label for="m1_4">4</label> 
  </td> 
  <td width="20" colpsan="1"> 
  <input value="5" type="radio" id="m1_5" name="m1" onClick="this.form.radiom1.value = this.value;"><label for="m1_5">5</label> 
  </td> 
  <td width="20" colpsan="1"> 
  <input value="6" type="radio" id="m1_6" name="m1" onClick="this.form.radiom1.value = this.value;"><label for="m1_6">6</label> 
  </td> 
  <td width="20" colpsan="1"> 
  <input value="7" type="radio" id="m1_7" name="m1" onClick="this.form.radiom1.value = this.value;"><label for="m1_7">7</label> 
  </td> 
</tr> 
<tr> 
  <td width="162"> 
  <b>Content (se). </b>  </td> 
  <td width="35" colpsan="1"> 
  <input value="1" type="radio" id="m2_1" name="m2" onClick="this.form.radiom2.value = this.value; "><label for="m2_1">1</label> 
  </td> 
  <td width="25" colpsan="1"> 
  <input value="2" type="radio" id="m2_2" name="m2" onClick="this.form.radiom2.value = this.value;"><label for="m2_2">2</label> 
  </td> 
  <td width="31" colpsan="1"> 
  <input value="3" type="radio" id="m2_3" name="m2" onClick="this.form.radiom2.value = this.value;"><label for="m2_3">3</label> 
  </td> 
  <td width="20" colpsan="1"> 
  <input value="4" type="radio" id="m2_4" name="m2" onClick="this.form.radiom2.value = this.value;"><label for="m2_4">4</label> 
  </td> 
  <td width="20" colpsan="1"> 
  <input value="5" type="radio" id="m2_5" name="m2" onClick="this.form.radiom2.value = this.value;"><label for="m2_5">5</label> 
  </td> 
  <td width="20" colpsan="1"> 
  <input value="6" type="radio" id="m2_6" name="m2" onClick="this.form.radiom2.value = this.value;"><label for="m2_6">6</label> 
  </td> 
  <td width="20" colpsan="1"> 
  <input value="7" type="radio" id="m2_7" name="m2" onClick="this.form.radiom2.value = this.value;"><label for="m2_7">7</label> 
  </td> 
</tr> 
</table> 
<br> 
<input type="hidden" name="radiom1" id="radiom1">
<input type="hidden" name="radiom2" id="radiom2"> 
<center><input type="submit" name="page3" value="Page suivante"></center> 
</body> 
</html>

@+ Dgse

par **Manou** » 03 avr. 2006, 11:50

J'ai mis ce code pour tester mes boutons radio et j'ai remarque qu'il ne marche que pour une variable m1 et ne prend pa en compte la 2eme varaible m2 :

<html>
<head>
<script language="javascript" type="text/javascript">
function VerifCheck()
{
//alert (document.f.test.value);
if(document.f.test.value == "")
        {
        alert ('Cochez toutes les cases SVP');
         return false;
        }
else {return true;}
}
</script>
</head>
<body>
<form name="f" method="post" action="page02.php" onsubmit="return VerifCheck();">

<table border="0" align="center" width="75%" cellpadding="15" cellspacing="0"><br>
<tr>
  <td width="162">
  <b>Heureux (se). </b>  </td>
  <td width="35" colpsan="1">
  <input value="1" type="radio" id="m1_1" name="m1" onClick="this.form.test.value = ('1'); "><label for="m1_1">1</label>
  </td>
  <td width="25" colpsan="1">
  <input value="2" type="radio" id="m1_2" name="m1" onClick="this.form.test.value = ('2');"><label for="m1_2">2</label>
  </td>
  <td width="31" colpsan="1">
  <input value="3" type="radio" id="m1_3" name="m1" onClick="this.form.test.value =('3');"><label for="m1_3">3</label>
  </td>
  <td width="20" colpsan="1">
  <input value="4" type="radio" id="m1_4" name="m1" onClick="this.form.test.value =('4');"><label for="m1_4">4</label>
  </td>
  <td width="20" colpsan="1">
  <input value="5" type="radio" id="m1_5" name="m1" onClick="this.form.test.value =('5');"><label for="m1_5">5</label>
  </td>
  <td width="20" colpsan="1">
  <input value="6" type="radio" id="m1_6" name="m1" onClick="this.form.test.value =('6');"><label for="m1_6">6</label>
  </td>
  <td width="20" colpsan="1">
  <input value="7" type="radio" id="m1_7" name="m1" onClick="this.form.test.value =('7');"><label for="m1_7">7</label>
  </td>
</tr>
<tr>
  <td width="162">
  <b>Content (se). </b>  </td>
  <td width="35" colpsan="1">
  <input value="1" type="radio" id="m2_1" name="m2" onClick="this.form.test.value = ('1'); "><label for="m2_1">1</label>
  </td>
  <td width="25" colpsan="1">
  <input value="2" type="radio" id="m2_2" name="m2" onClick="this.form.test.value = ('2');"><label for="m2_2">2</label>
  </td>
  <td width="31" colpsan="1">
  <input value="3" type="radio" id="m2_3" name="m2" onClick="this.form.test.value =('3');"><label for="m2_3">3</label>
  </td>
  <td width="20" colpsan="1">
  <input value="4" type="radio" id="m2_4" name="m2" onClick="this.form.test.value =('4');"><label for="m2_4">4</label>
  </td>
  <td width="20" colpsan="1">
  <input value="5" type="radio" id="m2_5" name="m2" onClick="this.form.test.value =('5');"><label for="m2_5">5</label>
  </td>
  <td width="20" colpsan="1">
  <input value="6" type="radio" id="m2_6" name="m2" onClick="this.form.test.value =('6');"><label for="m2_6">6</label>
  </td>
  <td width="20" colpsan="1">
  <input value="7" type="radio" id="m2_7" name="m2" onClick="this.form.test.value =('7');"><label for="m2_7">7</label>
  </td>
</tr>
</table>
<br>
<input type="hidden" name="test" id="test">
<center><input type="submit" name="page3" value="Page suivante"></center>
</body>
</html>

Si quelqu'un peut me dire cmment faire pour resoudre ce pb! merci bcp!

par **Manou** » 01 avr. 2006, 11:38

-> Dgse

Merci bcp,j'ai bien teste et ca marche. C'est un truc simple mais j'avais besoin de votre aide! Thanks!

par **Dgse** » 01 avr. 2006, 10:49

Bonjour

Une partie de solution a ton probléme fais en direct.

<html>
<head>
<script language="javascript" type="text/javascript"> 
function VerifCheck()
{ 
alert (document.f.test.value);
if(document.f.test.value == "") 
		{ 
        alert ('Aucun Check'); 
         return false; 
    	}
else {return true;}
}
</script>
</head>
<body> 
<form name="f" method="post" action="page02.php" onsubmit="return VerifCheck();"> 

<table border="0" align="center" width="75%" cellpadding="15" cellspacing="0"><br> 
<tr> 
  <td width="162"> 
  <b>Heureux (se). </b>  </td> 
  <td width="35" colpsan="1"> 
  <input value="1" type="radio" id="m1_1" name="m1" onClick="this.form.test.value = ('1'); "><label for="m1_1">1</label> 
  </td> 
  <td width="25" colpsan="1"> 
  <input value="2" type="radio" id="m1_2" name="m1" onClick="this.form.test.value = ('2');"><label for="m1_2">2</label> 
  </td> 
  <td width="31" colpsan="1"> 
  <input value="3" type="radio" id="m1_3" name="m1" onClick="this.form.test.value =('3');"><label for="m1_3">3</label> 
  </td> 
  <td width="20" colpsan="1"> 
  <input value="4" type="radio" id="m1_4" name="m1" onClick="this.form.test.value =('4');"><label for="m1_4">4</label> 
  </td> 
  <td width="20" colpsan="1"> 
  <input value="5" type="radio" id="m1_5" name="m1" onClick="this.form.test.value =('5');"><label for="m1_5">5</label> 
  </td> 
  <td width="20" colpsan="1"> 
  <input value="6" type="radio" id="m1_6" name="m1" onClick="this.form.test.value =('6');"><label for="m1_6">6</label> 
  </td> 
  <td width="20" colpsan="1"> 
  <input value="7" type="radio" id="m1_7" name="m1" onClick="this.form.test.value =('7');"><label for="m1_7">7</label> 
  </td> 
</tr> 
</table> 
<br>
<input type="hidden" name="test" id="test">
<input type="hidden" name="formnum" value="2"> 
<center><input type="submit" name="page3" value="Page suivante"></center> 
</body> 
</html>

@+ Dgse

Verification d'un bouton radio

Répondre

Étendre la vue Revue du sujet : Verification d'un bouton radio

Validation de boutons radio !