Discussion :

[c-bolo]

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 :

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

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 :

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

[kernelfailure]

Ca :

Code :

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

var tab = new Array(nbr);

Je le transformerait en :

Code :

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

var tab = {};

Que j'utiliserais comme ça :

Code :

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

tab[this.name] = this.value;

Puis je compterais mes résultat 'onclick' :

Code :

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

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 :

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

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

[E.Bzz]

Bonjour,
pourquoi chercher midi à 14h ?

Cf. la FAQ

A+

[c-bolo]

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 :

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

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

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

Code :

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

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.



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

[SpaceFrog]

Code :

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

 name='choix-"q"'

c'est quoi ce nommage ???

Tu as essayé

Code :

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

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

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

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 :

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

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. */
 
}

[E.Bzz]

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 ) de retranscription du code PHP ...

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

A+

[c-bolo]

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 :

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

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

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

Code :

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

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 :

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

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 :

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

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 !

Merci à tous