Bloquer un submit avec 2 s�ries de multiples checkbox

Version imprimable

Bonjour,

Je comme � dynamiser le site web de l'association en y int�grant du javascript.
C'est la premi�re fois que je poste ici, m�me si r�guli�rement je lis des posts durant mes recherces.

Dans le cas pr�sent, je souhaite bloquer un submit si aucun checbox n'est coch�. Ceci pour 2 s�ries de checbox ind�pendante et sans en conna�tre le nombre au d�part : ils sont cr�er � la vol�e (de 1 � 10).
Le submit se trouve une centaine de lignes plus loin.

Voici le code qui g�n�re les checkbox :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // -----code if ($chien_classe_nbr_2==1) { $checked_2='checked=\"checked\"'; } // -----code for ($i=0; $i<$chien_classe_nbr_2; $i++) { // ----- Liste de classes du chien $cours_chien_classe_nom=$chien_classe_explode_2[$i]; $classe_donnees=DonneesClasseNom($cours_chien_classe_nom); $classe_couleur=$classe_donnees[0]; $classe_section=$classe_donnees[1]; print "<div class=\"div_classe_chien\">"; print "<div class=\"div_classe_couleur\" style=\"background-color: $classe_couleur; padding-top: 2px;\" align=\"center\">$classe_section<br />$cours_chien_classe_nom</div>"; print " <input type=\"checkbox\" name=\"$cours_chien_classe_2\" value=\"oui\" $checked_2/>"; print "</div>"; } // ----- du code entre print "<div style=\"float: left; width: 70px; height: 30px;\" align=\"center\"><input class=\"enregistrer\" type=\"submit\" value=\" \" title=\"Valider\"></div>";
Il y a 2 fois ce script : il faut au moins 1 checkbox par chien.

Si quelqu'un � une merveilleuse id�e pour moi.

Merci d'avance pour votre aide.

25/01/2013, 20h20
sekaijin

heu c'est pas le forum php ici
peux ton avoir le code HTML g�n�r�

quant � bloquer le submit
de quel submit il s'agit ? je ne l'ai pas trouv�

A+JYT
25/01/2013, 20h38
ddaweb

Slt sekaijin,

Oui c'est celui du javascript.

Au moment o� le code a �t� interpr�t�, pour 1 ou 2 chiens on a les classes dans lesquelles il est avec un checbox � c�t� de chacune des classes.

Au moins une classe par chien doit �tre s�lectionn�e pour l'envoi vers l'enregistrement du chien dans la base de donn�es : d'o� le javascript pour bloquer l'envoi sans s�lection.

Le submit est la derni�re ligne de mon code.

Voici l'image de l'affiche complet du code :

http://www.cecs.be/checkbox.JPG

Si une seule classe, je coche par d�faut ... mais avant le submit au moins 1 cache par chien doit �tre coch�e.

J'esp�re que ceci est plus clair.
26/01/2013, 08h53
SpaceFrog
on bloque l'envoi d'un formulaire en testant dans le onsbmit au moyen d'une fonction qui retourne tru ou false

Code:

onsubmit="return testForm()"
Code:

1 2 3 function testFrom(){ // ici tu retourne true ou false selon tes tests }
Mais comme le precise seka, ici ce n'est pas le forum php ...

montre nous ton code html / js g�n�r� !!

Hummm comme c'est un code g�n�r� � la vol�e, je ne sais pas d'avance le nombre de chiens et le nombre de classes que j'aurai (issus du requ�te MySql).

Le javascript devra �tre int�gr� au PHP �videmment, l� je vais me d�brouiller si n�cessaire, d�j� avoir une id�e de d�part m'aiderait grandement car je ne connais absolument rien en javascript : pour ma facilit� j'en int�gre pour cette nouvelle version ... contr�les avant envoi (avant c'�tait envoi et ensuite contr�le : retour n�cessaire en cas d'erreur).

Hier j'ai trouv� un p'ti code (si simple qu'il est honteux que je n'y ai pas pens�) qui va me d�tecter si le javascript est activ� ou pas et donc affichage de la page ou pas ... sinon le javascript ne serait pas d'une grande utilit�.

Voici le code source de la page affich� ci-dessus dans mon navigateur :

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<html>
<head></head
<body>
<!-- Je passe le code ci-dessus -->
 
<div class="titre_page">Gestion des cours : 26/01/2013</div>&nbsp;<br />
<p class="titre_lvl1"><u>Le membre</u></p>
<div class="clear_space_4">&nbsp;</div>
 
<!-- Partie pour le retour si une erreur -->
<form name="v2_gestion_cours_3_retour"  action="?pg=v2_gestion_cours_2" method="post" ><input type="hidden" name="cours_membre" value="466" />
 
<input type="hidden" name="cours_avec_chien" value="oui" />
<input type="hidden" name="cours_chien_1" value="503" />
<input type="hidden" name="cours_paiement_1" value="L" />
<input type="hidden" name="cours_chien_2" value="607" />
<input type="hidden" name="cours_paiement_2" value="L" />
<input type="hidden" name="divers_remarque" value="" />
<input type="hidden" name="divers_defraiement" value="" />
<div class="texte_noir_spacing_2"><div style="float: left; width: 70px; height: 30px;" align="center"><input class="retour_precedent" type="submit" value="          " title="Retour formulaire de cours"></div>
466. <strong>Nom du membre</strong></div>
<div class="clear_space_4">&nbsp;</div><hr class="hr_noir" /><div class="clear_space_4">&nbsp;</div>
 
</form>
 
<!-- Formulaire en question -->
<form name="v2_gestion_cours_sql_retour"  action="?pg=v2_gestion_cours_4_sql" method="post" >
<input type="hidden" name="cours_membre" value="466" />
<input type="hidden" name="cours_avec_chien" value="oui" />
 
<fieldset class="fieldset"><legend class="legend"> Les classes des chiens </legend>
 
<!-- Partie générée par le code PHP posté -->
<font class="texte_noir_spacing_2">503 : <strong>FURAX</strong></font><div class="clear_space_4">&nbsp;</div>
<div class="div_classe_chien"><div class="div_classe_couleur" style="background-color: red; padding-top: 2px;" align="center">4B<br />A</div>&nbsp;<input type="checkbox" name="" value="oui" checked="checked"/></div><div class="clear_space_4">&nbsp;</div><div class="clear_space_4">&nbsp;</div>
 
<font class="texte_noir_spacing_2">607 : <strong>JINN</strong></font><div class="clear_space_4">&nbsp;</div>
<div class="div_classe_chien"><div class="div_classe_couleur" style="background-color: red; padding-top: 2px;" align="center">4B<br />A</div>&nbsp;<input type="checkbox" name="" value="oui" /></div><div class="div_classe_chien"><div class="div_classe_couleur" style="background-color: blue; padding-top: 2px;" align="center">4C<br />novice</div>&nbsp;<input type="checkbox" name="" value="oui" /></div>
<!-- Fin du code -->
 
</fieldset>
<div class="clear_space_4">&nbsp;</div>
 
<fieldset class="fieldset"><legend class="legend"> Calcul de la somme due </legend><div class="div_nom">&nbsp;</div>
<div class="div_liquide" align="right"><u>Liquide</u></div>
<div class="div_type" align="right"><u>Type</u></div>
<div class="div_banque" align="right"><u>Banque</u></div><div class="clear_space_4">&nbsp;</div>
 
<div class="div_nom"><strong>FURAX</strong></div>
<div class="div_liquide" align="right">0.00 €</div><div class="clear_space_4">&nbsp;</div>
<input type="hidden" name="cours_chien_nbr" value="2" />
<input type="hidden" name="cours_chien_1" value="503" />
<input type="hidden" name="cours_chien_paiement_1" value="L" />
<input type="hidden" name="cours_chien_abonnement_1" value="0000" />
<input type="hidden" name="cours_chien_somme_1" value="0.00" />
<input type="hidden" name="cours_chien_tva_1" value="6" />
<input type="hidden" name="cours_chien_remarque_1" value="0" />
<input type="hidden" name="cours_chien_paiement_date_1" value="2013-01-26" />
 
<div class="div_nom"><strong>JINN</strong></div>
<div class="div_liquide" align="right">0.00 €</div><div class="clear_space_4">&nbsp;</div>
<input type="hidden" name="cours_chien_nbr" value="2" />
<input type="hidden" name="cours_chien_2" value="607" />
<input type="hidden" name="cours_chien_paiement_2" value="L" />
<input type="hidden" name="cours_chien_abonnement_2" value="0000" />
<input type="hidden" name="cours_chien_somme_2" value="0.00" />
<input type="hidden" name="cours_chien_tva_2" value="6" />
<input type="hidden" name="cours_chien_remarque_2" value="0" />
<input type="hidden" name="cours_chien_paiement_date_2" value="2013-01-26" />
 
</fieldset><div class="clear_space_4">&nbsp;</div><div class="clear_space_4">&nbsp;</div>
<hr />
<div class="clear_space_4">&nbsp;</div><div class="clear_space_4">&nbsp;</div>
 
<!-- Envoi du formulaire -->
<div style="float: left; width: 70px; height: 30px;" align="center"><input class="enregistrer" type="submit" value="          " title="Valider"></div>
<!-- -->
 
<div style="float: left; width: 80px; height: 30px;" align="center"><a href="?pg=v2_gestion_cours_1"><img src="./images/membre_ajout.gif" border="0" title="Introduire un autre membre"></a></div>
<div style="float: left; width: 130px; height: 30px;" align="center"><a href="imprimer_poils_et_plumes.php?id_membre=466" target="_blank"><img src="./images/poils_et_plumes.gif" border="0" title="Imprimer le bon 'Poils et Plumes'"></a></div><div class="clear_space_4">&nbsp;</div>
 
</form>	
<!-- Fin du formulaire -->
 
</div>	
</body>
</html>

J'y ai mis des annotations pour se retrouver plus facilement.

Zut je viens de voir que le nom de la checkbox n'est pas g�n�r� (un oubli) : il est diff�rent � chaque fois car il j'y int�gre le N� du chien et le n� de la classe

Citation:
Envoy� par ddaweb
Hummm ...
Code:

1 2 3 4 5 6 7 <html> <head>....  <form name="v2_gestion_cours_sql_retour" action="?pg=v2_gestion_cours_4_sql" method="post" > ... </form> 
...
comme le dit @SpaceFrog
Code:

1 2 3 4 5 6 7 8 9 <html> <head>....   <form onsubmit="return testForm(this)" name="v2_gestion_cours_sql_retour" action="?pg=v2_gestion_cours_4_sql" method="post" > ... </form> 
definir la fonction
Code:

1 2 3 4 function testFrom(theForm){ // ici tu retourne true ou false selon tes tests theForm....; }
enfin dans ton code tu as un pb tu as plusieurs inputs qui on le m�me nom "cours_chien_nbr" donc lorsque ton formulaire sera pos� seul une des valeur sera transmise mais tu ne sais pas laquelle.

A+JYT

26/01/2013, 15h04
ddaweb
Merci pour ta r�ponse.

En effet ta remarque sur la valeur envoy�e plusieurs fois est pertinante, je l'ai remarqu� apr�s avoir post� en relisant le code et j'ai rectifi� mon code depuis : le input plac� avant une accolade au lieu d'apr�s.
C'est la derni�re envoy�e qui sera prise en compte, mais comme c'�tait la m�me valeur, je ne l'avais pas remarqu� � la page suivante.

C'est justement l� que je ne sais pas quoi faire.
Code:

1 2 3 4 1234 function testFrom(theForm){ // ici tu retourne true ou false selon tes tests theForm....; }
D'apr�s ce que j'ai lu un peu partout, il me semble devoir travailler sur un "id" pour chaque chien (chien_1 et chien_2) : identique pour toutes les classe :

Code:

<input type="checkbox" name="" value="oui" checked="checked" id="chien_1"/>

Sans pouvoir l'�crire, la fonction utiliserait peut-�tre 'getElementById' ... mais sans certitude.
Je suis au b�aba du javascript, c'est la premi�re fois que j'y fait appel � ce point.
26/01/2013, 16h36
sekaijin

res
ce n'est pas necessaire de jouer avec les ids
pour v�rifier que la checkbox chien_1 est valide il suffit de faire
Code:

1 2 3 4 function testFrom(theForm){ // ici tu retourne true ou false selon tes tests return theForm.chien_1.checked == true; }
Code:

<input type="checkbox" name="chien_1" value="oui" checked="checked"/>

A+JYT

Arf, tus a oubli� un EDIT que j'ai fais :

Citation:

Envoy� par ddaweb

Zut je viens de voir que le nom de la checkbox n'est pas g�n�r� (un oubli) : il est diff�rent � chaque fois car il j'y int�gre le N� du chien et le n� de la classe

je remet donc le code d�finitif de la partie des checkbox qui est d�j� trait� actuellement et fonctionnel, c'est pour cela que j'avais penser de travailler avec des "ID" :

Code:

1
2
3
4
5
6
7
8
9
10
11
<fieldset class="fieldset"><legend class="legend"> Les classes des chiens </legend>
 
<font class="texte_noir_spacing_2">503 : <strong>FURAX</strong></font><div class="clear_space_4">&nbsp;</div>
<div class="div_classe_chien"><div class="div_classe_couleur" style="background-color: red; padding-top: 2px;" align="center">4B<br />A</div>&nbsp;<input type="checkbox" name="cours_chien_classe_1_0" value="oui" checked="checked"/></div>
<div class="clear_space_4">&nbsp;</div><div class="clear_space_4">&nbsp;</div>
 
<font class="texte_noir_spacing_2">607 : <strong>JINN</strong></font><div class="clear_space_4">&nbsp;</div>
<div class="div_classe_chien"><div class="div_classe_couleur" style="background-color: red; padding-top: 2px;" align="center">4B<br />A</div>&nbsp;<input type="checkbox" name="cours_chien_classe_2_0" value="oui" /></div>
<div class="div_classe_chien"><div class="div_classe_couleur" style="background-color: blue; padding-top: 2px;" align="center">4C<br />novice</div>&nbsp;<input type="checkbox" name="cours_chien_classe_2_1" value="oui" /></div>
 
</fieldset>

�a ne change pas grand chose de travailler avec des ids
le pb est de connaitre la liste des chiens

je n'ai pas bien saisi comment tu nomme tes chiens.
mais tu peux mettre le nombre de chiens dans le formulaire
en php quand tu g�n�re ton formulaire tu peux ajouter un input "nombreDeChiens" dans ton formulaire.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- Formulaire en question -->
<!-- ajouter ici un onsubmit -->
<form onsubmit="return testForm(this)"
name="v2_gestion_cours_sql_retour"  action="?pg=v2_gestion_cours_4_sql" method="post" >
<input type="hidden" name="nombreDeChiens" value="4" />
...
<input type="checkbox" name="cours_chien_classe_0" value="oui" checked="checked"/>
<input type="checkbox" name="cours_chien_classe_1" value="oui" checked="checked"/>
...
<input type="checkbox" name="cours_chien_classe_2" value="oui" />
<input type="checkbox" name="cours_chien_classe_3" value="oui" />
</form>	
<!-- Fin du formulaire -->

et du coup dans ton test tu mets

Code:

1
2
3
4
5
6
7
8
function testFrom(theForm){
  var result = true;
  // passer en revue toutes les checkox dont le nom est "cours_chien_classe_" +i
  for (var i= i < theFrom.nombreDeChiens; i++) {
    result = result && return theForm["cours_chien_classe_"+i];
  }
  return result;
}

je n'ai pas compris combien de check box par chien
si tu en as un nombre variable tu fais une boucle sur les chiens et � l'interieur une boucles de checkbox pour chaque chien
(en ayant ajout� pour chaque chient un input hidden donnant le nombre de checkbox)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- Formulaire en question -->
<!-- ajouter ici un onsubmit -->
<form onsubmit="return testForm(this)"
name="v2_gestion_cours_sql_retour"  action="?pg=v2_gestion_cours_4_sql" method="post" >
<!-- nombre de chiens -->
<input type="hidden" name="nombreDeChiens" value="4" />
...
<!-- nombre de checkbox du chient 0 -->
<input type="hidden" name="chient_0" value="1" />
<input type="checkbox" name="cours_chien_classe_0_0" value="oui" checked="checked"/>
...
<!-- nombre de checkbox du chien 1 -->
<input type="hidden" name="chient_1" value="2" />
<input type="checkbox" name="cours_chien_classe_1_0" value="oui" />
<input type="checkbox" name="cours_chien_classe_1_1" value="oui" />
...
</form>	
<!-- Fin du formulaire -->

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function testFrom(theForm){
  var result = true;
  for (var i= i < theFrom.nombreDeChiens; i++) {
    //lire le nombre de checkbox du chien
    var nombreCheckBox = theForm["chien_"+i].value;
    // passer en revue toutes les checkox dont le nom est "cours_chien_classe_" + i + "_" + j
    for (var j=0; j < nombreCheckBox; j++) {
       result = result && return theForm["cours_chien_classe_" + i + "_" + j].checked;
    }
  }
  return result;
}

c'est exemple v�rifie que toutes les boites sont checked. � toi de d�finir quand le form est valide.

A+JYT

Je ne connais pas le nombre de chiens au d�part : 1 ou 2.

Comment d�terminer le nombre de chiens et de classe :
1. Je lis ce qui a �t� post� pour le chien 1, par un 'isset ($_POST)' pour le chien 2
2. Pour chaque chien, je lis un champs texte dans la DB avec les classes (s�par�es par un ';' ) en PHP j'explose ce champs et le compte = nbr de classes.
3. Je fais une boucle avec le nombre du point 2. pour les checkbox (et affichage de la classe) avec la variable $i.

Maintenant comment s'appelle la checkbox :
pour le chien 1 : 'cours_chien_classe_check_1_'.$i;
pour le chien 2 : 'cours_chien_classe_check_2_'.$i;

Pour chaque chien une seule classe coch�e est suffisant, quelque soit le nombre de classe (elles peuvent toutes �tre coch�es !).

Ce qui existe d�j� et que tu sembles en avoir besoin (j'ai laiss� le code php) :
Code:

1 2 3 4 5 6 7 8 9 print "<form onsubmit=\"return testForm(this)\" name=\"v2_gestion_cours_sql_retour\" name=\"v2_gestion_cours_4_sql\" action=\"?pg=v2_gestion_cours_4_sql\" method=\"post\" >";  print "<input type=\"hidden\" name=\"cours_chien_nbr\" value=\"$cours_chien_nbr\" />";  print "<input type=\"hidden\" name=\"cours_chien_classe_1_nbr\" value=\"$chien_classe_nbr_1\" />";  print "<input type=\"hidden\" name=\"cours_chien_classe_2_nbr\" value=\"$chien_classe_nbr_2\" />";
Je vais donc tenter de modifier ta solution pour la v�rification des classes (le onsubmit j'ai compris), pour le chien 2 il faut tester qu'il existe :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function testFrom(theForm){ var result = true; var nbr1 = 0; for (var i= 1; i < theForm.cours_chien_nbr; i++) { //lire le nombre de checkbox du chien 1 var nombreCheckBox = theForm["cours_chien_classe_1_nbr"].value; // passer en revue toutes les checkox du chien 1 for (var j=0; j < nombreCheckBox; j++) { nbr1 = nbr1 && return theForm["cours_chien_classe_check_" + i + "_" + j].checked; } if nbr1 = 0 { result = false; } } // faire la même chose pour chien 2 si existe : là je sèche return result; }
Je tente de comprendre et �crire du javascript, une r�ponse me donnera mes premi�res erreurs ... :lol:
Cela ressemble au PHP, mais un peu �crit autrement.