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

Bloquer un submit avec 2 séries de multiples checkbox

JavaScript

Vue hybride

Discussions similaires

Partager

Partager