Verification radio avant envoi

Version imprimable

slt à tous
j'ai un petit blem sur un verif de formulaire et plus précisement sur les radio.

j'explique mes radio sont géneres auto via un bdd php
bdd "poids"
variable externe $thep

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
echo'<form action="?rub=panierrecap&prod" method="post" name="frm" onsubmit="return ctr();" >';
$req13 = mysql_query("SELECT * FROM poids WHERE $thep BETWEEN tranch1 AND tranch2") or die("Erreur SQL13 !"); 
	while($data13 = mysql_fetch_array($req13)) {
	echo'<table><tr><td class="cad03 centrage"><input type="radio" name="choix" value="'.$data13[id].'"></td>
	<td class="cad03">'.$data13[trans].'</td>
	<td class="cad07">'.$data13[infos].'</td>
	<td class="cad03 droite">'.$data13[prix].' €</td>
	</tr></table><br />';
	}
echo'<input type="submit" value="CONTINUER" class="boutonlien" >
</form>';

je vérifie qu'au moins un des radios est cochés.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
    function ctr()
	{
   n=frm.choix.length;
   var checkvalue = '';
   for (i=0; i<n; i++)
   {
	 if (frm.choix[i].checked)
     {
         checkvalue = frm.choix[i].value;
         break;
     }
   }
   if(checkvalue == '')
   {
       alert('veuillez sélectionner une option de port !')
       return(false);
   }
}	
</script>

cela fonctionne quand j'ai plus d'un radio qui est généré, mais cela ne marche plus si j'en ai qu'un.

ou est mon blem ???
Merci d'avance de votre aide.
@+

15/01/2009, 13h32
le_chomeur

bonjour,
Merci de poster le code HTML généré et non le code php.

Pardon
voici le code de la page

Code:

1
2
3
4
5
6
7
8
9
10
11
<form action="?rub=panierrecap&prod" method="post" name="frm" onsubmit="return ctr();" >54Livraison impossible avec ce poids de colisLivraison impossible avec ce poids de colisLivraison impossible avec ce poids de colis
<table><tr><td class="cad03 centrage"><input type="radio" name="choix" value="4"></td>
	<td class="cad03">la poste</td>
	<td class="cad07"></td>
	<td class="cad03 droite">50 â‚¬</td>
	</tr></table><br /><table>
<tr><td class="cad06 droite"></td>
<td  class="cad05 droite" ><input type="submit" value="CONTINUER" class="boutonlien" >
<img class="vertical" src="./img/arrow.png" alt="" /></td></tr>
</table>
</form>

15/01/2009, 13h46
le_chomeur

tout simplement parce que :

Code:

n=frm.choix.length;

ne renvois pas une taille mais undefined s'il n'y a qu'un seul élément puisqu'il ne s'agit plus d'un tableau mais d'un simple objet
solution , si undefined alors , récupérer directement l'objet :)
15/01/2009, 13h48
spawns

Merci pour ton aide
mais comment tu traduits ca en code ???

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
n = (frm.choix.length != "undefined") ? frm.choix.length:frm.choix;
var checkvalue = '';
if(typeof(n) == number){
   for (i=0; i<n; i++)
   {
	 if (frm.choix[i].checked)
     {
         checkvalue = frm.choix[i].value;
         break;
     }
   }
}
else{
 if (frm.choix.checked)
     {
         checkvalue = frm.choix.value;
         break;
     }
}
...

un truc dans ce genre :)

15/01/2009, 14h10
spawns

Re
oui mais non
car cela ne fonctionne pas.
si je ne coche pas le radio cela ne me dis rien alors que cela devrait m'indiquer de cocher le radio
15/01/2009, 14h43
le_chomeur

je t'ai donné une explication pour résoudre ton problème , il y a surement un bug , car j'ai tapé de tête ... tu as les grandes lignes :)
15/01/2009, 14h49
spawns

si tu veux le code d'origine
il est dans le 1er post.

Comme je maîtrise pas trop le javascript j'ai un peu de mal à debugger
15/01/2009, 15h00
E.Bzz
Bonjour,

Citation:

Envoyé par spawns

si tu veux le code d'origine
il est dans le 1er post.

je pense qu'il l'aurait retrouvé tout seul ;)

Normalement il suffit de remplacer les "..." de la fin du code donné par le tien
Code:

1 2 3 4 5 if(checkvalue == '') { alert('veuillez sélectionner une option de port !') return(false); }
A+

c'est ce que j'ai fait mais ca change rien

voila le code avec les modifs :

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
 
<script type="text/javascript">
    function ctr()
	{
n = (frm.choix.length != "undefined") ? frm.choix.length:frm.choix;
var checkvalue = '';
if(typeof(n) == number){
   for (i=0; i<n; i++)
   {
	 if (frm.choix[i].checked)
     {
         checkvalue = frm.choix[i].value;
         break;
     }
   }
}
else{
 if (frm.choix.checked)
     {
         checkvalue = frm.choix.value;
         break;
     }
}
   if(checkvalue == '')
   {
       alert('veuillez sélectionner une option de port !')
       return(false);
   }
}	
</script>

15/01/2009, 15h33
franculo_caoulene

Pourquoi ne pas cocher un bouton radio par défaut? C'est ce que je fais toujours. Au mieux l'utilisateur n'a pas à cliquer, au pire il doit cliquer. Chose qu'il est obligé de faire si tu crées un contrôle.
15/01/2009, 15h48
E.Bzz

Citation:

Envoyé par franculo_caoulene

Au mieux l'utilisateur n'a pas à cliquer, au pire il doit cliquer.

Je vois encore pire : il oublie qu'il faut cliquer (ou s'en tape), et il n'y a pas de contrôle possible.

Ne rien sélectionner l'oblige à choisir.

A+
15/01/2009, 15h55
franculo_caoulene

Citation:

Envoyé par E.Bzz

Je vois encore pire : il oublie qu'il faut cliquer (ou s'en tape), et il n'y a pas de contrôle possible.

Ne rien sélectionner l'oblige à choisir.

A+

A choisir n'importe quoi? Ca revient au même...
15/01/2009, 16h03
E.Bzz

Citation:

Envoyé par franculo_caoulene

A choisir n'importe quoi? Ca revient au même...

Pas vraiment : dans ce cas c'est un acte volontaire, et suivant le domaine (fonctionnel) de l'application, le résultat est différent (s'il y a un problème de responsabilité, par exemple).

Ici, pour des options de port, apparemment :
Si le marseillais qui a commandé son lave-vaisselle oublie de changer le choix par défaut "Tenir le produit à ma dispo dans votre entrepôt de Lille", ça peut aussi faire grincer des dents (alors que ça sera une erreur d'inattention "de bonne foi").

Par contre, pour un formulaire dans un blog, je t'accorde que ça n'a aucune importance ;)

A+
15/01/2009, 16h10
spawns

Oui d'accord avec toi E.Bzz

c'est pourquoi il faut absolument qu'au moins un bouton soit coché et même s'il n'y a qu'un choix possible il faut que l'internaute le coche lui.

le code actuel ne fonctionne pas car si aucun radio n'ai coché cela valide tout de même le formulaire.

Bon ben si vous insistez

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
<!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" lang="fr">
<head>
   <title>tester si un bouton radio est coché</title>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   </style>
</head>
<body>
   <form id="f" method="post">
      <input id="c1" name="c" type="radio" value="1" />
      <input id="c2" name="c" type="radio" value="2" />
      <input id="c3" name="c" type="radio" value="3" />
      <input id="s" type="submit" value="soumettre" />
   </form>
   <script type="text/javascript">
   var Utils = {
      Evenement: {
         ajouter: function(elm, evt, fn) {
            if (document.addEventListener) {
               if (!elm.length || elm.elements) {
                  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.length || elm.elements) {
                  var r = elm.attachEvent("on" + evt, fn);
                  return r;
               } else {
                  for (var i = 0, imax = elm.length; i < imax; i++) {
                     var r = elm[i].attachEvent("on" + evt, fn);
                     return r;
                  }  
               }
            }
         }
      },
      Formulaire: {
         /****** partie intéressante ******/
         obtenirValeur: function(elms) {
            var r = false;
            for (var i=0, imax=elms.length; i<imax; i++) {
               if (elms[i].checked) {
                  r = true;
                  break;
               };
            }
            return r;
         }
         /****** partie intéressante ******/
      }
   }
   Utils.Evenement.ajouter(document, "submit", function(e){
      var elm = e.Target || e.srcElement;
      /****** partie intéressante ******/
      var cs = document.getElementsByName("c");
      return Utils.Formulaire.obtenirValeur(cs);
      /****** partie intéressante ******/
   });
 
   </script>
</body>
</html>

15/01/2009, 16h19
E.Bzz
Citation:

Envoyé par spawns

le code actuel ne fonctionne pas car si aucun radio n'ai coché cela valide tout de même le formulaire.

Oui, et en regardant rapidement, je vois pas pourquoi :?

Tu peux essayer autrement :
en partant du principe qu'une fois un des radios coché, l'utilisateur n'a plus les moyens (sauf script adequat que tu ajouterais dans la page), de rendre tous les radios décochés, il suffit de gérer une variable booléenne (globale)
Code:

1 2 3 4 <head> <script type="text/javascript"> var blnCoche = false; ...
avec sur chaque radio

Code:

onclick="blnCoche = true;"

Ta fonction de vérif devrait être beaucoup plus simple ;)

EDIT : oui, je sais, il y a plus esthétique ;)
Mais plus simple ?

A+
15/01/2009, 16h30
spawns

cela ne fonctionne pas non plus,
j'ai integré

Code:

onclick="blnCoche = true;"

dans mes radio
et

Code:

var blnCoche = false;

dans la fonction et même hors de la fonction ca ne marche pas on peut toujours valider sans que cela soit cocher
15/01/2009, 16h39
E.Bzz
Citation:

Envoyé par spawns

Code:

var blnCoche = false;

dans la fonction et même hors de la fonction ca ne marche pas on peut toujours valider sans que cela soit cocher

Tu n'aurais pas oublié quelque chose ?
Code:

1 2 3 4 function ctr() { return blnCoche; }
C'est ce que je voulais dire par

Citation:

Envoyé par E.Bzz

Ta fonction de vérif devrait être beaucoup plus simple

:mrgreen:

EDIT : et c'est bien "hors de la fonction"

A+

Désolé cela ne fonctionne toujours pas

voici le code que j'ai testé

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
<script type="text/javascript">
var blnCoche = false;
    function ctr()
	{
n = (frm.choix.length != "undefined") ? frm.choix.length:frm.choix;
var checkvalue = '';
if(typeof(n) == number){
   for (i=0; i<n; i++)
   {
	 if (frm.choix[i].checked)
     {
         checkvalue = frm.choix[i].value;
         break;
     }
   }
}
else{
 if (frm.choix.checked)
     {
         checkvalue = frm.choix.value;
         break;
     }
}
   if(checkvalue == '')
   {
       alert('veuillez sélectionner une option de port !')
       return(false);
   }
return blnCoche;
   }	
</script>

ainsi que

Code:

onclick="blnCoche = true;"

dans mes radios

Je ne comprends pas. on peut toujours valider sans que cela soit cocher

15/01/2009, 17h25
E.Bzz

Citation:

Envoyé par spawns

Je ne comprends pas. on peut toujours valider sans que cela soit cocher

Relis bien mon dernier post, notamment la fonction ... tu compliques trop ;)

A+

Salut,

frm.choix est un raccourci de frm.elements['choix'], j'éviterai de
l'utiliser.

Voici ma fonction pour tester un groupe de radio si ça peut t'aider.
il doivent tous avoir un attribut name identique dans le groupe
Code:

1 2 3 4 5 6 7 8 9 function checkRadio(formName, fieldName) { var field = document.forms[formName].elements[fieldName]; if(field.length) { for(var i=0;i<field.length;i++) if(field[i].checked) return false; } else if(field.checked) return false; return true; }

15/01/2009, 17h39
spawns
Citation:
Envoyé par E.Bzz

Tu n'aurais pas oublié quelque chose ?

Code:

1 2 3 4 function ctr() { return blnCoche; }

C'est ce que je voulais dire par :mrgreen:

EDIT : et c'est bien "hors de la fonction"

A+
si j'utilise juste ca cela ne fonctionne pas non plus
15/01/2009, 20h53
spawns

Ok c'est bon
ta solution était donc la bonne.

J'avais simplement oublié une quote dans la syntaxe de mon radio.