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.