Formulaire controle des cases

possibilité de cocher une case dans le formulaire

Anonyme

14 octobre 2008 à 13:14:39

Bonjour,

en naviguant sur mon ami google, j'ai découvert un code sympa qui permet de de contrôle de nombre de case à cocher dans un formulaire le voici

<script language="javascript">
<!--
function compteur_coches(obj) {
max = 2;

box1 = obj.form.case1.checked;
box2 = obj.form.case2.checked;
box3 = obj.form.case3.checked;
box4 = obj.form.case4.checked;
nombre = (box1 ? 1 : 0) + (box2 ? 1 : 0) + (box3 ? 1 : 0) + (box4 ? 1 : 0);

if (nombre > max) {
alert("Vous ne pouvez pas cocher plus de " + max + " cases !");
obj.checked = false;
}
}
// -->
</script>

Cependant je suis bloquer car le nombre de case de mon formulaire dépend du nombre d'enregistrement de ma table user...

Le formulaire affiche les users sélectionner par date de naissance, le nombre de case est donc variable!

Je fais appel au super zéro!!

Merci de votre aide

Thunderseb

14 octobre 2008 à 13:26:48

Tu n'as qu'à donner un id incrémenté aux checkboxes, mettre leur nombre dans un <input type="hidden" /> et de faire une boucle en JS pour les récupérer

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript">
<!--
function check() {
	var count = parseInt(document.getElementById("check_count").value);
	var box;
	alert(count);
	
	for (var i=0; i<count; i++) {
		box = document.getElementById("check_" + i);
		// et tu tests sit box est cochée, avec box.checked. 
	}
}
//-->
</script>
</head>
<body>

	<input id="check_0" type="checkbox" />
	<input id="check_1" type="checkbox" />
	<input id="check_2" type="checkbox" />
	<input id="check_3" type="checkbox" />
	<input id="check_4" type="checkbox" />
	
	<input type="hidden" value="5" id="check_count" />
	
	<input type="button" value="Vérifier" onclick="check();" />

</body>
</html>

Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - sdlm.be - Horus.aero

Anonyme

14 octobre 2008 à 13:40:10

Merci de ta réponse mais je ne comprend pas trop cette partie

<input id="check_0" type="checkbox" />
	<input id="check_1" type="checkbox" />
	<input id="check_2" type="checkbox" />
	<input id="check_3" type="checkbox" />
	<input id="check_4" type="checkbox" />
	
	<input type="hidden" value="5" id="check_count" />
	
	<input type="button" value="Vérifier" onclick="check();" />

mon code est de la forme

<input type="checkbox" name="user" value="'.$rep["Nom"].' '.$rep["Prenom"].'">

En bref je ne vois pas trop comment mettre le id="check_(incrémentation)", aussi cette ligne

<input type="hidden" value="5" id="check_count" />

donne le résultat du nombre de checkbox, alors je sais pas trop j'ai du mal à me représenter le code.

Peut tu m'expliquer un peu plus ce code stp merci d'avance

Thunderseb

14 octobre 2008 à 13:43:52

Ca c'est à générer avec PHP.

Je sais pas comment tu fais pour écrire les différentes checkboxes, mais je supposes que tu le fais avec une boucle, donc il te suffit d'écrire $i :

<input type="checkbox" id="check_'.$i.'" name="user" value="'.$rep["Nom"].' '.$rep["Prenom"].'">

Et pour l'<input type="hidden" /> il faut bien dire à javascript combien de case à cocher il doit récupérer. Donc tu dois l'écrire aussi avec PHP (le nombre de tour de blucle total + 1).

Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - sdlm.be - Horus.aero

Anonyme

14 octobre 2008 à 13:46:20

Merci j'ai compris je met ça en application

</style>
<!--
function check() {
	var count = parseInt(document.getElementById("check_count").value);
	var box;
	alert(count);
	
	for (var i=0; i<count; i++) {
		box = document.getElementById("check_" + i);
		// et tu tests sit box est cochée, avec box.checked. 
	}
}
//-->
</script>
</head>

	<body>
		<div id="calque4">
			<span class="ds20">Accès Club Sécurisé - Ligue Nord pas de Calais des Sociétés d\'Aviron</span></div>
		<p><img src="images/fondNPDC.jpg" alt="" width="760" height="1000" border="0" /></p>
		<div id="calque2">
			<span class="ds27">
			Inscription pour la Tête de Rivière de Dunkerque en '.$categorie.'</span></div>
		<div id="calque1">
		<center>
		<form method="post" action="saveinscrit.php?catégorie='.$categorie.'&sexe='.$sexe.'&Age='.$age.'">
<TABLE WIDTH=230 BORDER=0 CELLPADDING=4 CELLSPACING=3 STYLE="page-break-before: always">
	<COL WIDTH=46>
	<COL WIDTH=157>
	<TR VALIGN=TOP>
		<TD WIDTH=46>
			<P ALIGN=CENTER>Cocher</P>
		</TD>
		<TD WIDTH=157>
			<P ALIGN=CENTER>Nom Pr&eacute;nom</P>
		</TD>
	</TR>';
	
	$sql = mysql_query('SELECT * FROM licence WHERE Structure = "'.$_SESSION['club'].'" AND sexe = "'.$_GET['sexe'].'" AND Age = "'.$_GET['Age'].'"');
while ($rep = mysql_fetch_array($sql)){

echo'
	<TR VALIGN=TOP>';
echo'
		<TD WIDTH=46>
		<P ALIGN=CENTER>
		<input type="checkbox" id="check_'.$i.'" name="rameur" value="'.$rep["Nom"].' '.$rep["Prenom"].'">
		</P>
		</TD>';
echo'
		<TD WIDTH=157>
		<P ALIGN=CENTER>'.$rep["Nom"].' '.$rep["Prenom"].'
		</P>
		</TD>';
echo'
	</TR>';
}
echo'
</TABLE>
</center>
	</body>

</html>';

voila mon code mai rien n'est fait j'ai vraiment du mal avec JS...

smilz

14 octobre 2008 à 19:24:42

J'ai envie de dire que tu t'embête à mettre un <input type="hidden" />, tu peux compter le nombre de case à cocher en faisant :

var formEl = document.getElementById("ton_form").getElementsByTagName("input");
var count = checkboxes.count; //C'est vraiment énervant qu'il y ait les propriétés et les méthodes accessibles en JS, je sais jamais si c'est bon...
var i = 0, nbChecks;
while(i < count)
{
	if(formEl[i].getAttribute('type') == 'checkbox')
	{
		if(formEl[i].checked)
		{
			nb++;
		}
	}
	i++;
}

i contiendra toutes les checkboxes cochées. Tu n'as plus qu'à bloquer si le nombre est dépassé. Tu n'as plus besoin du input hidden. C'est plus beau car c'est entièrement modulaire (ajout de checkbox après coup) sans t'embêter et en plus ça sent bon le printemps

Thunderseb

14 octobre 2008 à 19:30:35

Je pensais faire comme ça au début. Mais ça foire si il y a d'autres cases à cocher sur le page et dans le même formulaire.

Bof, ça ne sent pas si bon que ça. Une boucle for aurait été mieux. C'est plus propre

Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - sdlm.be - Horus.aero

Anonyme

14 octobre 2008 à 21:10:48

En faite oui je voudrais qu'il y ai qu'une seule case de cocher si jamais 2 cases sont cochées alors une alert style "je devais cocher une seule case pour que l'inscription soit prise en compte.

Aussi je voudrais que la case cochée les vairables "nom" "prenom" "licence" soit selectioner et non les autres!

Mais javoue que la ça dépense un peu mes connaissances:

Voici mon code

<div id="calque1">
<center>
		<form method="post" action="saveinscrit.php?catégorie='.$categorie.'">
<TABLE WIDTH=50% BORDER=0 CELLPADDING=4 CELLSPACING=3 STYLE="page-break-before: always">
	<COL WIDTH=5%>
	<COL WIDTH=15%>
	<COL WIDTH=15%>
	<COL WIDTH=15%>
	<TR VALIGN=TOP>
		<TD WIDTH=5%>
			<P ALIGN=CENTER>Cocher</P>
		</TD>
		<TD WIDTH=15%>
			<P ALIGN=CENTER>Nom</P>
		</TD>
		<TD WIDTH=15%>
			<P ALIGN=CENTER>Pr&eacute;nom</P>
		</TD>
		<TD WIDTH=15%>
			<P ALIGN=CENTER>N&deg; de licence</P>
		</TD>
	</TR>';
	$sql = mysql_query('SELECT * FROM licence WHERE Structure = "'.$_SESSION['club'].'" AND sexe = "'.$_GET['sexe'].'" AND Age = "'.$_GET['Age'].'"');
while ($rep = mysql_fetch_array($sql)){

echo'	
	<TR VALIGN=TOP>';
echo'
		<TD WIDTH=5%>
			<P ALIGN=CENTER><input class="dsR1" type="checkbox" name="case" value="oui"><BR>
			</P>
		</TD>';
echo'
		<TD WIDTH=15%>
			<P ALIGN=CENTER><input type="hidden" name="nom" value="'.$rep["Nom"].'" />'.$rep["Nom"].'<BR>
			</P>
		</TD>';
echo'
		<TD WIDTH=15%>
			<P ALIGN=CENTER><input type="hidden" name="prenom" value="'.$rep["Prenom"].'" />'.$rep["Prenom"].'<BR>
			</P>
		</TD>';
echo'		<TD WIDTH=15%>
			<P ALIGN=CENTER><input type="hidden" name="licence" value="'.$rep["No adherent"].'" />'.$rep["No adherent"].'<BR>
			</P>
		</TD>';
echo'
	</TR>';
	}

echo'</TABLE>
<br> <input type=submit value=Inscrire> -
     <input type=reset value=Annuler>
	 </center>
</form></div>

Comment intégrer votre code dans ma page?

Merci d'avance pour votre précieuse aide

Timot

14 octobre 2008 à 22:00:05

Citation : Pas de titre

En faite oui je voudrais qu'il y ai qu'une seule case de cocher si jamais 2 cases sont cochées alors une alert style "je devais cocher une seule case pour que l'inscription soit prise en compte.

Euh sinon, tu sais que si tu veux une liste de choix avec une seule case qu'on peut cocher, il existe les boutons radios : ici appelé zones d'option.

Anonyme

14 octobre 2008 à 22:10:09

Oui je connais

je n'y avait pas penser merci beaucoup!

Oki une seul ligne peut être sectionner mais je suis toujours embêter, il faudrait attribuer un numéro au ratio (1 pour ligne 1, 2 pour ligne 2...)

Voici un apercu de l'effet du code de ma page Image utilisateur

comment ça je pourrai enregistrer la ligne dans ma base de donné facilement.

Merci de votre aide