Bloquer un submit avec 2 séries de multiples checkbox

**ddaweb** · 25/01/2013, 20h05

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

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
// -----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 "&nbsp;<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.

**sekaijin** · 25/01/2013, 20h20

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

**ddaweb** · 25/01/2013, 20h38

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 :

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.

**SpaceFrog** · 26/01/2013, 08h53

on bloque l'envoi d'un formulaire en testant dans le onsbmit au moyen d'une fonction qui retourne tru ou false

Code :

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

onsubmit="return testForm()"

Code :

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

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

**ddaweb** · 26/01/2013, 11h21

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

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

**sekaijin** · 26/01/2013, 13h37

Envoyé par ddaweb

Hummm ...

Code html :

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

1
2
3
4
5
6
7
<html>
<head>....
<!-- Formulaire en question -->
<form name="v2_gestion_cours_sql_retour"  action="?pg=v2_gestion_cours_4_sql" method="post" >
...
</form>	
<!-- Fin du formulaire -->

...

comme le dit @SpaceFrog

Code html :

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

1
2
3
4
5
6
7
8
9
<html>
<head>....
<!-- 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" >
...
</form>	
<!-- Fin du formulaire -->

definir la fonction

Code :

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

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

**ddaweb** · 26/01/2013, 15h04

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 :

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

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 :

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

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

**sekaijin** · 26/01/2013, 16h36

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 :

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

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

Code :

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

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

A+JYT

**ddaweb** · 26/01/2013, 17h31

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

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 :

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

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>

**sekaijin** · 26/01/2013, 18h11

ç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 html :

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

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 :

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

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

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

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

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

**ddaweb** · 26/01/2013, 20h23

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

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

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\" >";
 
<!-- Nombre de chiens -->
print "<input type=\"hidden\" name=\"cours_chien_nbr\" value=\"$cours_chien_nbr\" />";
 
<!-- Nombre de classe chien 1 -->
print "<input type=\"hidden\" name=\"cours_chien_classe_1_nbr\" value=\"$chien_classe_nbr_1\" />";
<!-- Nombre de classe chien 2 : pas toujours présent -->
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 :

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

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

Cela ressemble au PHP, mais un peu écrit autrement.

Bloquer un submit avec 2 séries de multiples checkbox

JavaScript

Discussions similaires

Partager

Partager