Vérifier si X bouton radio sont cochés ?

Version imprimable

Bonjour à tous,

Je souhaiterais savoir comment faire pour vérifier en JS si mes boutons radios sont tous bien cocher ?

Je programme en JSP (Java) + Html.

J'affiche un concours avec x question

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<form action="blabla" methode="post" name="participer">
...
for(int i=0;i<concour.getListeQuestion.size();i++){
out.print("" +
"<b>" + radio.get(0) + "?</b><p>" +
"<input type='radio' name='choix-"+q+"' value='" + radio.get(1) + "' onclick='return verifierFormulaire('"+concour.getLquestion().size()+"');'>" + radio.get(1) + "<br>" +
"<input type='radio' name='choix-"+q+"' value='" + radio.get(2) + "' onclick='return verifierFormulaire('"+concour.getLquestion().size()+"');'>" + radio.get(2) + "<br>" +
"<input type='radio' name='choix-"+q+"' value='" + radio.get(3) + "' onclick='return verifierFormulaire('"+concour.getLquestion().size()+"');'>" + radio.get(3) + "<br>"
);
 
out.print("" +
"<input type='submit' value='Valider' id='envoyer' disabled='disabled' >" +
"</form>");
);

Pour chaque question j'affiche 3 radio avec comme nom='choix-i' i étant un l'indice de mon for

Code de JavaScript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function verifierFormulaire(nbr){
    //Vérifier que tt les champs radio sont bien cocher
    //Si c'est le cas rendre mon button valider online
    //Sinon ne rien faire et laisser hors line
    //nbr est le nom de question, donc à vérifier X(nbr) group radio
    var tab = new Array(nbr);
    for(i=0;i<nbr;i++){
        //participer est le nom de mon formulaire
        if(document.participer.getElementByName("choix-"+i).checked){
            tab.push(true);
        }else{
            tab.push(false);
            return false;
        }
    }
    document.getElementById('envoyer').disabled = '';
    return true;
}

Merci d'avance à tous

Ca :

Code:

var tab = new Array(nbr);

Je le transformerait en :

Code:

var tab = {};

Que j'utiliserais comme ça :

Code:

tab[this.name] = this.value;

Puis je compterais mes résultat 'onclick' :

Code:

var i=0;for (var a in tab) {i++}

et voilà.

C'est quoi "q" ?
Parce que, si c'est le numéro de ta question, il y a un truc simple :
(J'ai un Objet pour gérer des tests. Je fais ceci :)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 // Extrait de la construction du radio ... onClick='"+this.instanceName+".store(this,"+this.i+")' value='"+text_rep[0]+"' ... // store, va ajouter à t (Array) le numéro et sa réponse this.store = function (o,w) { this.t[w] = o.value; } // Enfin, result va d'abord s'assurer que la taille des réponses correspond à mon incrément du nombre de question this.result = function () { if( this.t.length != this.i ) { alert("Les réponses sont imcomplètes."); return; } ...

22/12/2009, 09h57
E.Bzz

Bonjour,
pourquoi chercher midi à 14h ?

Cf. la FAQ ;)

A+

Merci messieurs,

Sorry mais j'ai pas compris les explications de mister kernelfailure.
La variable q est l'indice de ma boucle for, ça deviendra par la même occasion le nom de mon champs radio

Code:

<input type='radio' name='choix-"+q+"'....>

Concernant la réponse de E.Bzz, j'ai pas su l'adapter à mon problème :roll:
Il me dit que le nom de mon bouton radio est indéfini, pourtant mon formulaire est présenté comme ceci
Code:

1 2 3 4 5 6 <form id='participer' name='participer' action='ServletClientDao' method='POST' > <input type='radio' name='choix-"q"' value='be'> <input type='radio' name='choix-"q"' value='fr'> <input type='radio' name='choix-"q"' value='jp'> <input type='submit' value='Valider' id='valider' name='valider' disabled='disabled'/> </form>
Les valeurs de mes boutons radio sont présenté autrement, je récupere depuis une base de donné la bonne réponse ainsi que les deux mauvaise réponse que je stock aléatoirement dans les radio.

Auriez vous d'autre suggestion.

Je ré explique mon problème.

Je veux activer mon bouton "send" lorsque le joueur aura répondu à toutes les questions, ci joint un capture d'écran.

http://img710.imageshack.us/img710/1920/forumx.th.gif

S'il répond à toute les questions, il est bien évident qu'il peut participé à d'autre concours dont leur bouton valider "send" n'est pas activé !

Ps: Ne m'en voulez pas mais Javascript n'est pas ma tasse de thé !
Merci

22/12/2009, 16h50
SpaceFrog

Code:

name='choix-"q"'

c'est quoi ce nommage ???

Tu as essayé

Code:

document.getElementsByName('choix-"q"')

Pour ce qui est de la vérification pourquoi ne pas plutot passer par le onsubmit du form, ça eviterait d'avoir a lancer une fonction sur chaque click de bouton radio ...
ça se trouve aussi dans la FAQ

Pourquoi y-a-t'il des guillemets autours de q ? Ce n'est pas un nom valide.
Et à priori, q n'est pas initialisé.

Ton indice de boucle c'est pas i plutôt ? Ou alors il y a une autre boucle que tu n'as pas indiqué.

La première forme que je te proposais est celle-ci :
Code:

1 2 3 4 5 6 7 8 9 10 var tab = {}; function verifierFormulaire(){ tab[this.name] = this.value; var i=0; for (var a in tab) {i++} /*Maintenant, ajouter code : (Si i == nombre_de_question), alors signaler ou faire : tout est remplie. */ }

22/12/2009, 17h22
E.Bzz

Citation:

Envoyé par kernelfailure

Pourquoi y-a-t'il des guillemets autours de q ? Ce n'est pas un nom valide.
Et à priori, q n'est pas initialisé.

Il me semble qu'il ne s'agit que d'une tentative (hasardeuse :aie: ) de retranscription du code PHP ...

@c-bolo : le code généré (clic droit dans la page + "Code source ...") serait beaucoup plus utile !

A+

Sinon, il y aurait plus simple : 2 variable globales et 2 mini fonctions
Code:

1 2 3 4 5 6 7 8 9 10 11 var vGroupe1 = false; var vGroupe2 = false; function fGroupe1() { vGroupe1 = true; document.getElementById('valider').disabled = !(vGroupe1 && vGroupe2); } function fGroupe2() { vGroupe2 = true; document.getElementById('valider').disabled = !(vGroupe1 && vGroupe2); }
Chaque fonction à appeler sur onclick de chaque option du groupe correspondant ...

EDIT : si tu prévoit un "Reset" de ton form, il faut remplacer les variables par des input hidden ...

A+

Effectivement j'ai écrit des erreurs sur le topic!

C'est vraiment pas facile d'expliquer quand le code fait des tonnes de ligne !

J'ai déjà un boucle qui affiche tout les concours

Code:

for (i = 0; i < Lconcour.size(); i++) {

Dans cette boucle je vérifier si se concours à des questions

Code:

1
2
3
4
5
 
if(concours.getLQuestion.size() != 0){
out.print("" +
                                    "<form id='participer' name='participer' action='ServletClientDao?event=participer-"+concour.getId_concour()+"' method='POST' >");
for (int q = 0; q < concour.getLquestion().size(); q++) {

Ici je créer une List radio=new ArrayList();
A l'indice zero je stock la question
radio.set(0,concours.getLquestion.get(q).getQuestion());

A l'indice 1, 2 et 3 je stock aléatoirement la bonne reponse, ainsi que les deux mauvaise réponse.

Je tiens à dire que je réalise la partis jouer et NON PAS ADMIN !
A ce moment j'affiche la premier question de ce concours

Code:

1
2
3
4
5
6
out.print("" +
                                        "<b>" + radio.get(0) + "?</b><p>" +
                                        "<input type='radio' id='choix-"+q+"' name='choix-"+q+"' value='" + radio.get(1) + "' onclick='verifierFormulaire("+concour.getLquestion().size()+")'>" + radio.get(1) + "<br>" +
                                        "<input type='radio' id='choix-"+q+"' name='choix-"+q+"' value='" + radio.get(2) + "' onclick='verifierFormulaire("+concour.getLquestion().size()+")'>" + radio.get(2) + "<br>" +
                                        "<input type='radio' id='choix-"+q+"' name='choix-"+q+"' value='" + radio.get(3) + "' onclick='verifierFormulaire("+concour.getLquestion().size()+")'>" + radio.get(3) + "<br>"
                                    );

La variable "q" me permet de nommé chaque groupe de radio séparément

Et voici mon 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
function verifierFormulaire(nbr){
    //Vérifier que tt les champs radio sont bien cocher
    //Si c'est le cas rendre mon button valider online
    //Sinon ne rien faire et laisser hors line
    //nbr est le nombre de question, donc chaque question à 3bouton radio X ne nbr de question!
    //Chaque group de 3bouton radion on des id différent
 
    for(i=0;i<nbr;i++){//Cette boucle me permet de visiter tout les groupes radio "toute les questions", le joueur doit choisir une réponse à toute les questions de se concours pour valider
        //participer est le nom de mon formulaire
        for (j=0; j<document.participer.getElementById("choix-"+i).length; j++) {//Cette boucle me permet de visiter les 3 bouton radio de cette question!
            if (document.participer.getElementById("choix-"+i)[j].checked){
                document.participer.valider.disabled = '';
            }else{
                //Si je rentre ici c'est qu'il y a un group de bouton radio non cocher, je retourne donc false
                return false;
            }
        }
 
    }
    //Si j'arrive ici c'est que tout mes boutons sont cocher donc j'active mon send "valider" et je retourne true
    document.getElementById('valider').disabled = '';
    return true;
}

J'espere ne pas avoir écrit d'erreur !:aie:

Petite question
Concernant les nom et identifiant des balise html, vaut mieux utiliser ceci ou cela ?

<input type="radio" name="blabla"
<input type="radio" id="blabla"

Comment atteindre la valeur ?
J'ai tester document.nomform.getElementById("blabla").value mais le résultat est toujour le même cad meme si les valeurs de mes 3bouton sont bien différent !

Avec document.nomform.getElementsByName("blabla").value le résultat est
indéfini ?!

Hahhaha le JavaScript me rendra foo !:mouarf:

Merci à tous

22/12/2009, 20h53
SpaceFrog

kern j'étais aussi très surpris du nommage ...
mais ayant testé :

Code:

document.getElementsByName('choix-"q"').length

j'ai été surpris de voir qu'il l'acceptait ... !!
22/12/2009, 21h28
c-bolo
snif snif ....:cry:

Depuis hier que je suis sur se code.
Il est presque 22h et j'ai toujours pas la solution !:calim2:

1-Déjà pourquoi j'ai toujours le même résultat lorsque je veux afficher la value d'un radio ?, j'ai toujours la valeur du premier ?!

2-Pq je n'arrive pas a afficher le nbr de radio du même group ?
Dans mon JS j'ai
Code:

1 2 var obj=document.getElementById("choix-"+i); alert("Nbre de radio "+obj.length);
Help me help me
22/12/2009, 21h52
SpaceFrog

Dans ton html tu as :

Code:

<input type='radio' name='choix-"q"' value='be'>

Code:

alert(document.getElementsByName('choix-"q"').length)

le q n'est pas interprété comme variable
le name est TEXTUELLEMENT : choix-"q"
23/12/2009, 00h31
kernelfailure

Citation:

Envoyé par SpaceFrog

kern j'étais aussi très surpris du nommage ...
mais ayant testé :

Code:

document.getElementsByName('choix-"q"').length

j'ai été surpris de voir qu'il l'acceptait ... !!

Impressionant 8O

@c-bolo
J'ajoute qu'avec getElementById, si tu as un résultat > 1, c'est que tu as un sérieux problème :aie:

Au niveau des solutions (et des conseils), perso, j'en voix pas mal dans ce topic. C'est toi qui vois.

J'allez oublié de mettre le résultat trouvé !!

Voici une partie de mon code JSP, si vous avez besoin de détail n'hésiter pas !

Code:

1
2
3
4
5
6
7
8
9
10
out.print("" +
                                        "<b>" + radio.get(0) + "?</b><p>" +
                                        "<input type='radio' id='choix-" + q + "' name='choix-" + q + "-"+i+"' value='" + radio.get(1) + "' onclick='verifierFormulaire("+concour.getLquestion().size()+","+i+");'>" + radio.get(1) + "<br>" +
                                        "<input type='radio' id='choix-" + q + "' name='choix-" + q + "-"+i+"' value='" + radio.get(2) + "' onclick='verifierFormulaire("+concour.getLquestion().size()+","+i+");'>" + radio.get(2) + "<br>" +
                                        "<input type='radio' id='choix-" + q + "' name='choix-" + q + "-"+i+"' value='" + radio.get(3) + "' onclick='verifierFormulaire("+concour.getLquestion().size()+","+i+");'>" + radio.get(3) + "<br>");
                            }//Fin de ma boucle FOR onclick="alert()"
                            out.print("" +
                                    "<br><br>" +
                                    "<input type='submit' value='Valider' id='valider-"+i+"' name='valider' disabled='disabled'/>" +
                                    "</form>");

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
function verifierFormulaire(nbrDeQuestion,z){//Function permettant de désactivé mon button valider lorsque le joueur à participé à répondre au question
    var cBon = false;
    var cpt=0;
    //Possiblilité d'amelioré le bazard avec un tableau pou chaque question
 
   // alert('nbrDeQuestion  '+nbrDeQuestion);
 
    for(i=0;i<nbrDeQuestion;i++){
                var obj=document.getElementsByName("choix-"+i+"-"+z);
 
                //A trouver : une propriété qui retourne le nombre de réponse, ici 3. NE VAS PAS (obj.length());
                for(j=0;j<3;j++){
                    if (obj[j].checked){
                        cBon=true;
                        cpt++;
                        break;
                    }
                }
    }
    if(cBon && cpt == nbrDeQuestion){//Normalement bool n'es pas visible à se niveaux !'
            //Si j'arrive ici c'est que tout mes boutons sont cocher donc j'active mon send "valider" et je retourne true
        var obj=document.getElementById('valider-'+z);
        obj.disabled = '';
    }
}

Merci tous