Vérification de cases à cocher

Résolu/Fermé

ganaweb Messages postés 12 Date d'inscription jeudi 21 février 2013 Statut Membre Dernière intervention 9 octobre 2013 - 21 févr. 2013 à 21:04
ganaweb Messages postés 12 Date d'inscription jeudi 21 février 2013 Statut Membre Dernière intervention 9 octobre 2013 - 23 févr. 2013 à 19:25

Bonjour,

J'ai un formulaire de 200 cases à cocher (Composition musicale)
Chaque case à pour value="001" value="002" value="003" etc jusqu'à 200.
J'ai un bouton de commande (Validez) qui est caché.
Lorsque le visiteur a coché 16 cases, j'aimerais que ce bouton apparaisse (afin d'expédier la commande).
Par contre, si le visiteur coche plus de 16 cases, il faudrait un message lui indiquant qu'il a dépassé le quota. (le bouton disparaît tant qu'il n'a pas décoché les cases en trop.
En bref, il faudrait que ce bouton n'apparaisse que lorsque 16 cases sont cachées, ni plus, ni moins. C'est seulement à ce moment là qu'il peut cliquer sur ce bouton pour envoyer la commande.
D'avance un grand merci pour votre aide.
A tout hasard à cette adresse vous trouverez ce que je suis en train de faire :
http://www.albertgoldstein.fr, puis cliquer sur Commande.

Encore merci.

A voir également:

Vérification de cases à cocher
Vérification url - Guide
Case à cocher outlook - Forum Outlook
Cases à cocher - Guide
Verification de l'identité du serveur impossible - Forum WiFi
Comment cocher une case sans souris ✓ - Forum Windows

15 réponses

Réponse 1 / 15

ReDLoG
22 févr. 2013 à 12:15

Bonjour,

Une solution en Javascript voire même Ajax (Asynchronous Javascript And Xml) serait conseillé, creuse à partir de ces pistes là...!

Réponse 2 / 15

ganaweb Messages postés 12 Date d'inscription jeudi 21 février 2013 Statut Membre Dernière intervention 9 octobre 2013
22 févr. 2013 à 13:07

Merci de votre réponse... Mais pour creuser il faut avoir les outils... et malheureusement, je ne suis pas doué avec les programmes que vous me préconisez... J'ai 68 ans et je débute...
Si quelqu'un pouvait me faire ce petit bout de code, j'en serais ravi.
Merci encore

Réponse 3 / 15

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
22 févr. 2013 à 15:11

pas besoin d'Ajax, javascript suffit

par une fonction javascript lancée sur le onclick de chaque case à cocher, il faut "parcourir" toutes les case à cocher et compter celles qui sont cochées et activer le bouton si 16 cochées ou message d'erreur si plus

cherches "javascript parcourir les éléments d'un formulaire"
et revient si tu ne t'en sort pas

Réponse 4 / 15

ganaweb Messages postés 12 Date d'inscription jeudi 21 février 2013 Statut Membre Dernière intervention 9 octobre 2013
22 févr. 2013 à 19:40

Bonsoir, j'ai un peu parcouru le net à la recherche d'un code tout fait, mais comme je n'y comprends rien... J'en suis toujours au même stade...
Merci d'avance au prodige en javascript qui me donneras ce bout de code...

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 15

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
Modifié par Alain_42 le 22/02/2013 à 21:50

bon voilà un exemple je n'ai mis que 3 cases:

et deux boutons un le bouton1 qui n'est visible que quand 16 cases cochées

un autre le bouton2 qui est visible mais désactivé et s'active que si 16 cases

tu choisis celui que tu préfères

<head>
<script type="text/javascript">	
	function verif_nombre_cases(){		
		//on atteint tous les éléments qui ont le name='note'  et ça crée un array 
		var array_notes=document.getElementsByName('note');
		//compteur
		var cpt=0;
		//on parcours cet array pour compter celles cochées
		for(i=0;i<array_notes.length;i++){
			if(array_notes[i].checked==true){
				cpt++; //si cochée on incremente le compteur
			}
		}
		//si égal à 16 on active le bouton
		var bouton1=document.getElementById('bt_envoyer');
		var bouton2=document.getElementById('bt_envoyer2');
		if(cpt==16){bouton1.style.visibility='visible';}else{bouton1.style.visibility="hidden";}
		if(cpt==16){bouton2.disabled='';}else{bouton2.disabled="disabled";}
		//si supérieur à 16 message
		if(cpt>16){
			alert("Vous ne devez cocher que 16 notes maximum !");
		}
	}
  
</script>
</head>
<body>
<form name="form_notes" method="post" action="">
   <input type="checkbox" name="note" value="do" onclick="verif_nombre_cases();" /> do <br />
   <input type="checkbox" name="note" value="re" onclick="verif_nombre_cases();" /> ré <br />
   <input type="checkbox" name="note" value="mi" onclick="verif_nombre_cases();" /> mi <br /><br /><br />etc....
   <input type="submit" name="envoyer" id="bt_envoyer" value="Envoyer" style="visibility:hidden;" />
   <input type="submit" name="envoyer2" id="bt_envoyer2" value="Envoyer2" disabled="disabled" />
</form>

Réponse 6 / 15

ganaweb Messages postés 12 Date d'inscription jeudi 21 février 2013 Statut Membre Dernière intervention 9 octobre 2013
Modifié par ganaweb le 23/02/2013 à 00:33

Merci de votre super réponse que j'arrive un peu à comprendre et à reproduire avec mes données... Mais ça ne fonctionne pas.
J'ai certainement du faire une "bêtise"...
Voici mon code avec 10 cases et non plus 16 cases à cocher mais 8 :
<p><script type="text/javascript">

function verif_nombre_cases(){
//on atteint tous les éléments qui ont le name='note' et ça crée un array
var array_notes=document.getElementsByName('note');
//compteur
var cpt=0;
//on parcours cet array pour compter celles cochées
for(i=0;i<array_notes.length;i++){
if(array_notes[i].checked==true){
cpt++; //si cochée on incremente le compteur
}
}
//si égal à 8 on active le bouton
var bouton=document.getElementById('bt_envoyer');
if(cpt==8){bouton.style.visibility='visible';}else{bouton.style.visibility="hidden";}
//si supérieur à 8 message
if(cpt>8){
alert("Vous ne devez cocher que 8 Titres maximum !");
}
}

</script></p>
<form name="form_notes" method="post" action="" id="form_notes">
<p align="center"><span style="font-family: 'Loved by the King', Arial, 'Arial Unicode MS', Helvetica, sans-serif; font-size: 24px; font-weight: bold; text-shadow: rgb(23, 23, 23) 0px 0px 12px;">Cliquez sur un numéro et cochez les s'ils vous plaisent....</span><br></p>
<p align="center"><span style="font-family: 'Loved by the King', Arial, 'Arial Unicode MS', Helvetica, sans-serif; font-size: 24px; font-weight: bold; text-shadow: rgb(23, 23, 23) 0px 0px 12px;">Lorsque vous en aurez coché 8, un bouton de commande apparaitra.</span></p>
<table class="art-article" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; width: 100%;">
<tbody>
<tr>
<td style="width: 10%; text-align: center;">
<p style="text-align: center;"><input type="checkbox" name="note" value="001" onclick="verif_nombre_cases();">001</p>
</td>
<td style="width: 10%; text-align: center;">
<p style="text-align: center;"><input type="checkbox" name="note" value="002" onclick="verif_nombre_cases();">002</p>
</td>
<td style="width: 10%; text-align: center;">
<p style="text-align: center;"><input type="checkbox" name="note" value="003" onclick="verif_nombre_cases();">003</p>
</td>
<td style="width: 10%; text-align: center;">
<p style="text-align: center;"><input type="checkbox" name="note" value="004" onclick="verif_nombre_cases();">004</p>
</td>
<td style="width: 10%; text-align: center;">
<p style="text-align: center;"><input type="checkbox" name="note" value="005" onclick="verif_nombre_cases();">005</p>
</td>
<td style="width: 10%; text-align: center;">
<p style="text-align: center;"><input type="checkbox" name="note" value="006" onclick="verif_nombre_cases();">006</p>
</td>
<td style="width: 10%; text-align: center;">
<p style="text-align: center;"><input type="checkbox" name="note" value="007" onclick="verif_nombre_cases();">007</p>
</td>
<td style="width: 10%; text-align: center;">
<p style="text-align: center;"><input type="checkbox" name="note" value="008" onclick="verif_nombre_cases();">008</p>
</td>
<td style="width: 10%; text-align: center;">
<p style="text-align: center;"><input type="checkbox" name="note" value="009" onclick="verif_nombre_cases();">009</p>
</td>
<td style="width: 10%; text-align: center;">
<p style="text-align: center;"><input type="checkbox" name="note" value="010" onclick="verif_nombre_cases();">010</p>
</td>
</tr>
</tbody>
</table>
</form>
<br>
<br>
<p align="center"><input type="submit" name="envoyer" id="bt_envoyer" value="Envoyer" style="visibility:hidden;"></p>
<br>
<br>

Je ne comprends pas la ligne :
if(array_notes[i].checked==true){

De plus, (J'abuse) est-il possible de placer un lecteur de MP3 (Genre dewplayer ou autre), sur la même page qui jouerait le titre de la case cochée ?
Encore merci pour votre aide précieuse.

Réponse 7 / 15

ganaweb Messages postés 12 Date d'inscription jeudi 21 février 2013 Statut Membre Dernière intervention 9 octobre 2013
23 févr. 2013 à 00:54

Sur le site que je suis en train de créer, à la page Commande, j'ai mis un exemple de lecteur MP3 avec un titre fixe. Ce que j'aimerais, c'est que le lecteur soit vide et ne fonctionne qu'après avoir coché une case... ou, ce qui serait formidable c'est qu'il joue le morceau du N° (exemple 004) en le survolant avec la souris ...

http://www.albertgoldstein.fr puis dans le menu de gauche cliquez sur Commande pour avoir ma page exemple...

Vraiment, de tout coeur merci !

Réponse 8 / 15

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
23 févr. 2013 à 09:56

chez moi ça fonctionne, si tu utilises IE il faut autoriser l'éxécution de scripts quand la question t'est posée à l'ouverture de la page.
Voir commentaires

pour la mise en page au lieu de mettre des style= dans toutes les balises, vas voir le CSS sur le site alsacreations.org

pour le mp3 je ne connais pas trop, je regarde si j'ai un moment

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; utf-8"><title>Ma page</title>

<!-- <script ....  doit être mis entre les balises head et pas entre des <p></p> -->
<script type="text/javascript">
	function verif_nombre_cases(){
		//on atteint tous les éléments qui ont le name='note' et ça crée un array
		var array_notes=document.getElementsByName('note');
		//compteur
		var cpt=0;
		//on parcours cet array pour compter celles cochées
		for(i=0;i<array_notes.length;i++){
			//on parcours l'array, donc pour chaque case on verifie si cochée ou pas
			//array_notes[i] c'est la case i et on peut lire ses propriétés  .checked en est une
			if(array_notes[i].checked==true){
			cpt++; //si cochée on incremente le compteur
			}
		}
		//si égal à 8 on active le bouton
		var bouton=document.getElementById('bt_envoyer');
		if(cpt==8){bouton.style.visibility='visible';}else{bouton.style.visibility="hidden";}
		//si supérieur à 8 message
		if(cpt>8){
			alert("Vous ne devez cocher que 8 Titres maximum !");
		}
	}

</script>
</head>

<body>
<form name="form_notes" method="post" action="" id="form_notes">
<p align="center"><span style="font-family: 'Loved by the King', Arial, 'Arial Unicode MS', Helvetica, sans-serif; font-size: 24px; font-weight: bold; text-shadow: rgb(23, 23, 23) 0px 0px 12px;">Cliquez sur un numéro et cochez les s'ils vous plaisent....</span><br></p>
<p align="center"><span style="font-family: 'Loved by the King', Arial, 'Arial Unicode MS', Helvetica, sans-serif; font-size: 24px; font-weight: bold; text-shadow: rgb(23, 23, 23) 0px 0px 12px;">Lorsque vous en aurez coché 8, un bouton de commande apparaitra.</span></p>
<table class="art-article" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; width: 100%;">
<tbody>
<tr>
<td style="width: 10%; text-align: center;">
<p style="text-align: center;"><input type="checkbox" name="note" value="001" onclick="verif_nombre_cases();">001</p>
</td>
<td style="width: 10%; text-align: center;">
<p style="text-align: center;"><input type="checkbox" name="note" value="002" onclick="verif_nombre_cases();">002</p>
</td>
<td style="width: 10%; text-align: center;">
<p style="text-align: center;"><input type="checkbox" name="note" value="003" onclick="verif_nombre_cases();">003</p>
</td>
<td style="width: 10%; text-align: center;">
<p style="text-align: center;"><input type="checkbox" name="note" value="004" onclick="verif_nombre_cases();">004</p>
</td>
<td style="width: 10%; text-align: center;">
<p style="text-align: center;"><input type="checkbox" name="note" value="005" onclick="verif_nombre_cases();">005</p>
</td>
<td style="width: 10%; text-align: center;">
<p style="text-align: center;"><input type="checkbox" name="note" value="006" onclick="verif_nombre_cases();">006</p>
</td>
<td style="width: 10%; text-align: center;">
<p style="text-align: center;"><input type="checkbox" name="note" value="007" onclick="verif_nombre_cases();">007</p>
</td>
<td style="width: 10%; text-align: center;">
<p style="text-align: center;"><input type="checkbox" name="note" value="008" onclick="verif_nombre_cases();">008</p>
</td>
<td style="width: 10%; text-align: center;">
<p style="text-align: center;"><input type="checkbox" name="note" value="009" onclick="verif_nombre_cases();">009</p>
</td>
<td style="width: 10%; text-align: center;">
<p style="text-align: center;"><input type="checkbox" name="note" value="010" onclick="verif_nombre_cases();">010</p>
</td>
</tr>
</tbody>
</table>

<br>
<br>
<p align="center"><input type="submit" name="envoyer" id="bt_envoyer" value="Envoyer" style="visibility:hidden;"></p>
<!-- ATTENTION le bouton submit doit être inclus entre les balises <form> </form> sinon il ne postera pas les valeurs des cases cochées vers le script defini dans action= -->
</form>
<br>
<br>
</body>
</html>

Réponse 9 / 15

ganaweb Messages postés 12 Date d'inscription jeudi 21 février 2013 Statut Membre Dernière intervention 9 octobre 2013
23 févr. 2013 à 12:01

Bonjour,
Même en recopiant textuellement votre code, ça ne marche pas...
Je suis sous Chrome et non IE
Par contre, je fais le site sous Artisteer, un logiciel ou l'on ne peut avoir accès au Head, ce qui fait que lorsque dans la partie html de la page Commande, je colle le code, il ne l'accepte pas !
Avant je travaillais sous Front Page, et je pouvais faire ce que je voulais, mais là...
En tous cas, merci beaucoup de votre obligeance et de vos supers conseils.
Je vais essayer de voir du coté d'Artisteer ce que l'on peut faire.
Cordialement

Réponse 10 / 15

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
23 févr. 2013 à 13:20

en fait ce n'est pas obligatoire de mettre le <script javascript dans le <head></head>

donc si je comprend bien u utilises un template de CMS, la je ne connait pas trop

moi je met plutôt les mains dans le cambouis en codant dans un éditeur notepad++

Réponse 11 / 15

ganaweb Messages postés 12 Date d'inscription jeudi 21 février 2013 Statut Membre Dernière intervention 9 octobre 2013
23 févr. 2013 à 14:36

Merci Alain de ton aide...

En effet, je ne comprends pas, car j'ai d'autres scripts qui ne sont pas dans le <head> et qui fonctionnent bien... Sous artisteer. Je pense que pour quelqu'un "qui touche bien au code" et sans vouloir te conseiller, tu devrais l'essayer...
http://www.artisteer.com/
J'essaie de me débrouiller avec ce que tu m'as envoyé... ou peut-être une autre solution...
Merci encore.

Réponse 12 / 15

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
23 févr. 2013 à 14:52

justement essaies de mettre le script javascript en dehors du head

concernant artisteer ça ne me tente pas trop, il me semble que c'est payant aussi

Réponse 13 / 15

ganaweb Messages postés 12 Date d'inscription jeudi 21 février 2013 Statut Membre Dernière intervention 9 octobre 2013
23 févr. 2013 à 16:49

Je l'ai fait... C'est pareil !

Pour l'instant, j'essaie autre chose, mais je garde ton code bien précieusement... Il va certainement me resservir sur une autre page...

Oui, Artisteer est payant, mais quelle économie de temps !
Mon mail: rainart@ganagobie.com au cas ou...

Réponse 14 / 15

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
23 févr. 2013 à 17:18

evites de mettre ton adresse mail comme cela sur un forum.

Réponse 15 / 15

ganaweb Messages postés 12 Date d'inscription jeudi 21 février 2013 Statut Membre Dernière intervention 9 octobre 2013
23 févr. 2013 à 19:25

Merci du conseil...

Discussions similaires

Bouton case à cocher grisé

URGENT - codes ALT + ???

Excel, agrandir les cases a cocher

Supprimer cases à cocher

créer une case a cocher sur open office