Pb avec boucles imbriquées pour controle d'un formulaire

Pb avec boucles imbriquées pour controle d'un formulaire - HTML/CSS - Programmation

Marsh Posté le 12-11-2008 à 17:44:31    

Bonsoir,
 
Alors après quelques temps de recherches, je ne trouve pas de solution à mon problème.
 
J'ai plusieurs "groupes" de bouton radio à vérifier. Pour chaque groupe je dois vérifier si un bouton radio est coché, si c'est le cas alors j'affiche une image ok a coté du groupe sinon j'affiche une image ko. Je fais cette vérification sur l'ensemble des groupe.
Ainsi, lorsque je valide le formulaire, si il existe des groupes pour lesquels il n'y a pas eu de choix de sélectionné alors j'affiche une image ko a coté du groupe.
 
Ma boucle se constitue ainsi : Je boucle sur l'ensemble des groupes, ensuite pour chaque groupe rencontré, je boucle sur l'ensemble des boutons radio du groupe et controle si ils sont sélectionnés. Si durant cette dernière boucle, je trouve un bouton radio sélectionné alors je sors de la boucle du groupe pour passer au suivant et ainsi de suite. En revanche, si aucun bouton radio n'est sélectionné dans un groupe, j'affiche l'image ko et je refuse l'envoi du formulaire.
 
Voici le code javascript de ce traitement :  
 

Code :
  1. function Controle() {
  2. for(i=1; i<=5; i++){
  3.  j=0;
  4.  while(j<=3){
  5.   if(j==3){
  6.    document.getElementById('div'+i).style.backgroundImage = 'url(img/ko.gif)';
  7.    return false;
  8.   }
  9.   else if(document.form1.question+i[j].checked){
  10.    document.getElementById('div'+i).style.backgroundImage = 'url(img/ok.gif)';
  11.    break;
  12.   }
  13.   else{
  14.    j++;
  15.   }
  16.  }
  17. }
  18. }


 
pour info :  
* la variable i permet de parcourir les groupes (ici c'est "question" )
* la variable j permet de parcourir les boutons du groupe.
 
Si quelqu'un peut m'éclairer ce n'est pas de refus.
 
merci beaucoup

Reply

Marsh Posté le 12-11-2008 à 17:44:31   

Reply

Marsh Posté le 12-11-2008 à 18:18:16    

si tu pouvais expliquer un peu ton probleme ca serait cool
mais deja quelques conseils
le hardcode c est pas terrible (c est a dire ecrire toi meme les valeurs de i et j)
si demain le nombre de groupes ou de boutons par groupe change tu l as dans l os et ca t oblige a avoir le meme nombre de boutons dans chaque groupe

 

pour faire ca tu mets chaque groupe dans un div
disons <div class="group"> avec par défaut ko en fond
et ensuite dans chacun de ces divs tu choppes les inputs
en js t auras un truc genre

Code :
  1. var divs = document.getElementsByTagName('div');
  2. for (var i=0,i<divs.length;i++) {
  3.    if (divs[i].className == 'group') {
  4.        var inputs = divs[i].getElementsByTagName('input');
  5.        for (var j=0;j<inputs.length;j++) {
  6.            if (inputs[j].checked) divs[i].style.backgroundImage = 'url(img/ok.gif)';
  7.        }        
  8.    }
  9. }
 

c est codé a l arrache sans verif, mais ca devrait passer


Message édité par mIRROR le 12-11-2008 à 18:21:49

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 14-11-2008 à 11:06:22    

Salut mIRROR,
 
Tout d'abord merci pour ta réponse et désolé pour le temps!
 
Alors j'ai essayé ce que tu me dis et ça marche impec ! J'ai juste modifié un peu le code pour l'adapter à mon formulaire.
 
En revanche, maintenant j'ai un autre petit soucis. En effet, lorsque l'utilisateur arrive sur la page du formulaire, devant chaque question il y a une image avec une croix et un tic qui sont tous les deux grisés. lorsqu'il clique sur le bouton radio, l'image change pour mettre en vert le tic (la croix reste grisée).
Enfin, ce que je souhaite faire, c'est lorsque l'utilisateur valide le formulaire, si il a omis  de cocher un bouton radio d'une question, c'est que la croix devienne rouge (et donc le tic grisé), cela en changeant l'image bien sur.
 
j'ai donc fait une fonction de controle lors du clic sur le bouton "valider" du formulaire, mais mon soucis est que le controle marche mais seulement sur la première question où le bouton n'est pas sélectionné. Ce qui veut dire en fait, que ma boucle parcours le formulaire et dès qu'elle rencontre une question non renseigné et bien elle s'arrête pour afficher la croix rouge.
 
ce que je voudrai c'est que la croix rouge s'affiche devant toutes les questions non renseigné.
 
Je ne sais pas si c'est très claire ...
 
Voici ma fonction de controle :  
 

Code :
  1. function controle(){
  2. for (i=1; i<7; i++){
  3.  var divs = document.getElementById('div'+i);
  4.  if(divs.style.backgroundImage != 'url(img/ok.gif)'){
  5.   divs.style.backgroundImage = 'url(img/ko.gif)';
  6.   return false;
  7.  }
  8. }
  9. }


 
Merci pour ton aide mIRROR

Reply

Marsh Posté le 14-11-2008 à 11:15:56    

mais c est qu il recommence avec son hardcode le bougre [:florentg]
je t aide pas tant que tu n as pas réparé cette infamie :o


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 14-11-2008 à 11:45:40    

Sniff ...
 
Je ne vois pas en fait ce qui est bourrin.
 
peux-tu m'éclairer stp sur mon attitude... merci

Reply

Marsh Posté le 14-11-2008 à 12:03:17    

cette infamie la:

for (i=1; i<7; i++){


 
je t ai montré comment faire un truc souple  
c est pas à toi de fixer la valeur de tes compteurs
javascript doit le faire lui meme


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 14-11-2008 à 13:33:12    


D'accord ok.
 
merci pour cette info.
 
Mais je n'arrive pas à faire fonctionner malgrès cela le controle sur mon formulaire. En effet rien ne se passe, enfin si, le formulaire est validé alors que les boutons ne sont pas renseignés!
 
Que faire?
 
merci mIRROR

Reply

Marsh Posté le 14-11-2008 à 14:29:08    

c est normal, ton return casse le for
 
on va recommencer depuis le début parce que ton html aussi est moisi
id="div1" div2.....
c est n importe quoi. ici tu as besoin d une classe et tu tries comme je te l ai montré précédemment
 
ensuite pour ton return:
tu crées une variable avant le for du genre

Code :
  1. var isOk = true;


dans ton if au lieu de faire  

Code :
  1. return false;


 
tu fais  

Code :
  1. isOk=false;


 
et apres le for  

Code :
  1. return isOk;


 
et au passage cette ligne

Code :
  1. divs.style.backgroundImage = 'url(img/ko.gif)';

est complètement inutile


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 14-11-2008 à 15:18:55    

Ca y est j'ai saisi !
 
Ca c'est du code propre !
 
Mais reste un problème sur la fonction de controle lors du clic sur "valider". Rien ne se passe, enfin si la page se recharge (car c'est du test pour l'instant)
 
Voici les atributs de mon form :
 

Code :
  1. <form id="formulaire" name="form1" method="post" onsubmit="return controle()" action="test_js.html">


 
J'ai suivi ce que tu m'as dis en me basant sur ton premier code, mais au lieu de mettre "checked" j'ai mis "unchecked".
 
Fonction controle :  
 

Code :
  1. function controle(){
  2. var divs = document.getElementsByTagName('div');
  3. var isOk = true;
  4. for (var i=1; i<divs.lenght; i++){
  5.  if (divs[i].className == 'questions') {
  6.   var inputs = divs[i].getElementsByTagName('input');
  7.   for (var j=0; j<inputs.lenght; j++) {
  8.    if (inputs[j].unchecked) {
  9.     divs[i].style.backgroundImage = 'url(img/ko.gif)';
  10.     isOk = false;
  11.    }
  12.   }
  13.  }
  14. }
  15. return isOk;
  16. }


 
merci encore mIRROR pour ton aide et tes explications qui m'éclaircissent sur le javascript.

Reply

Marsh Posté le 14-11-2008 à 15:42:05    

spamal mais unchecked ca risque de pas passer [:dawa]
mets plutot !inputs[j].checked


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 14-11-2008 à 15:42:05   

Reply

Marsh Posté le 14-11-2008 à 15:54:33    

Le point d'exclamation avant le input permet de définir le contraire de checked ?
 
Malheureusement cela ne fonctionne pas.
 
Lorsque je coche aucun bouton radio et que je valide la page se recharge (puisque l'attribut action à pour valeur la même page que le formulaire)... triste
 
J'ai l'impression que cela vient du return isOk (à la fin) car lorsque je le met à false, enfin si je met return false à la place du dernier return isOk, et bien la validation ne se fait pas mais les images ne se chargent pas!
 
j'ai essayé d'inverser isOk, c'est à dire de le déclarer à "false" et d'ajouter un else avec le if(input[j]...), qui génère le true si le bouton est checké mais même résultat : le formulaire n'est pas envoyé et les images ne se chargent pas ... plus d'idée !
 
Qu'en penses-tu mIRROR ?

Reply

Marsh Posté le 14-11-2008 à 16:17:41    

c est length :o


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 14-11-2008 à 16:51:45    

Lol... bien vu
 
Mais maintenant autre problème ... et oui et j'arrive pas à le surmonter !
 
Si tous les bouton sont cochés et que je valide et bien les images se changent en croix rouge et le formulaire n'est pas validé !
 
Sinon c'est génial ... merci encore mIRROR

Reply

Marsh Posté le 14-11-2008 à 17:17:48    

voila avec ce code ca devrait passer tout seul

Code :
  1. function controle(){
  2.     var divs = document.getElementsByTagName('div');
  3.     var isOk = 0;
  4.     var questions = 0;
  5.     for (var i=0; i<divs.length; i++){
  6.         if (divs[i].className == 'questions') {
  7.             questions++;
  8.             var test = false;
  9.             var inputs = divs[i].getElementsByTagName('input');
  10.             for (var j=0; j<inputs.length; j++) {
  11.                 if (inputs[j].checked) {
  12.                     divs[i].style.backgroundImage = 'url(img/ok.gif)';
  13.                     isOk++;
  14.                     test = true;
  15.                 }
  16.             }
  17.             if (!test) divs[i].style.backgroundImage = 'url(img/ko.gif)';
  18.         }
  19.     }
  20.     return isOk==questions;
  21. }
 

c est des boutons radio donc un seul peut etre activé par groupe
avec ton dernier code, comme y aura toujours au moins un bouton unchecked par groupe tu obtiens la catastrophe que tu viens de décrire
ce que tu veux c est etre sur qu on ait fait un choix par groupe
donc on compte le nombre de groupes validés et à la fin on compare avec le nombre de groupes


Message édité par mIRROR le 20-11-2008 à 17:22:44

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 20-11-2008 à 12:47:37    

Salut mIRROR,
 
Comme je te l'avais dis, je me suis mis sur ton code aujourd'hui mais il y deux, trois choses que je ne saisis pas.
 
Je suis tout à fait d'accord sur le fait qu'un seul bouton radio par groupe soit coché. Mais en revanche, je ne vois pas comment faire pour modifier les images de non remplissage lors de la validation du formulaire.  
Je ne comprend pas le dernier return. Car pour moi (mais je ne suis vraiment pas sûr !), une fois sorti de la boucle for, la variable isOk est toujours à 0, non? Et en faite je ne comprend pas le but de ce dernier return !  Tu donnes à isOk le nombre de div c ça? mais voit pas pourquoi... :??:  
 
Mais malgré ce code, le formulaire ne se valide pas !
 
Merci beaucoup pour ces éclaircissements mIRROR

Reply

Marsh Posté le 20-11-2008 à 14:41:45    

chez moi ca valide tres bien je viens de tester a l instant
sois un peu plus explicite: si ca passe pas c est qu il y a probablement une erreur quelque part
 
sinon par rapport au code tu ne connais pas l opérateur d incrémentation ?
isOk++ c est équivalent à écrire isOk = isOk+1
donc en sortant du test isOk est égal au nombre de divs qui ont passé la validation
à la fin je fais un test, comme tu peux le faire dans un if(prout==pwet)
le test renverra true ou false


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 20-11-2008 à 15:40:25    

Oui je connais l'incrémentation.
 
j'ai trouvé mon problème! En fait j'avais oublié que mon bouton de validation était dans un div donc du coup je me retrouvais avec un div de trop !
 
mais la c'est bon.
 
J'aimerai afficher une croix rouge lors de la validation du formulaire : si il manque des réponses alors on affiche une croix rouge devant la question. Mais comment m'y prendre pour gérer cela?
 
Je te remercie mIRROR

Reply

Marsh Posté le 20-11-2008 à 15:45:02    

ha oui merde j ai pas fait gaffe y a une erreur sur le comptage des divs
jte répare ca tout de suite je vais editer le post avec le code
 
par contre je saisis mal ta question
les background ko/ok c est pas deja ca ?


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 20-11-2008 à 16:29:57    

Ben en fait lorsque la page du formulaire est affichée pour la première fois, il y a une image nommée "neutre" qui contient la croix et le tic tous deux grisés, devant chaque question. Lorsque l'utilisateur clique sur un bouton radio pour répondre à une question, l'image passe de neutre à "ok" (ok = croix grisée et tic vert).
 
Donc les questions auxquelles il a oublié de répondre et bien l'image reste à "neutre". En revanche dès qu'il valide le formulaire, si il y a des questions pour lesquelles il n'a pas répondu et bien dans ce cas la les images des questions non renseignées passent à "ko" (ko = croix rouge et tic grisé).
 
Donc au final si la validation du formulaire est rejetée, la ou les questions fausses ont une croix rouge (image "ko" ) devant elles et les questions qui sont cochées, elles, restent avec l'image "ok".
 
J'espère avoir été asez clair ...

Reply

Marsh Posté le 20-11-2008 à 17:17:45    

ok elles sont toutes grises au début et a la validation tu veux ok ou ko?

 

code édité


Message édité par mIRROR le 20-11-2008 à 17:23:02

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 20-11-2008 à 17:29:30    

C'est exactement ça que je voulais !
 
C'est super !
 
merci beaucoup mIRROR pour ton aide plus que précieuse !
 
Maintenant reste plus qu'a le mettre en place ! Youpi!
 
Merci encore mIRROR

Reply

Marsh Posté le 20-11-2008 à 17:48:31    

my pleasure :jap:


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed