modification d'appel d'une fonction JS

22 juil. 2006, 17:38

Voilà j'ai trouvé ça comme fonction sur le net pour tout cocher/décocher les cases d'un formulaire...

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var checkflag = "false";
function check(field) {
if (checkflag == "false") {
  for (i = 0; i < field.length; i++) {
  field[i].checked = true;}
  checkflag = "true";
  return "Tout décocher"; }
else {
  for (i = 0; i < field.length; i++) {
  field[i].checked = false; }
  checkflag = "false";
  return "Tout cocher"; }
}
//  End -->
</script>

mais l'appel de la fonction qui est fourni concerne toutes les cases à cocher du formulaire alors que j'ai 2 groupes distinct (que j'appelle type et zone), je veux que ça coche/décoche juste un de ces groupes pas les 2 en meme temps !

l'appel d'origine

<input type=button value="Tout cocher" onClick="this.value=check(this.form.list)">

mon code généré par php :

<INPUT type="checkbox" name="secteur[1]" value="3">Diois<br>
<INPUT type="checkbox" name="secteur[2]" value="1">Drôme Provençale<br>
<INPUT type="checkbox" name="secteur[3]" value="4">Valence<br>
<INPUT type="checkbox" name="secteur[4]" value="2">Vercors<br>
</td><td valign="top">
<INPUT type="checkbox" name="type[1]" value="2">Appartement<br>
<INPUT type="checkbox" name="type[2]" value="4">Château<br>
<INPUT type="checkbox" name="type[3]" value="1">Maison<br>
<INPUT type="checkbox" name="type[4]" value="5">Terrain

22 juil. 2006, 18:32

Salut,

Il te faudra dans ce cas 2 boutons pour distinguer les deux actions.

Tu as :

onClick="this.value=check(this.form.list)"

où "list" doit être le groupe de cases... ici tu n'as pas de "list' mais 'secteur' et 'type' suffit donc de remplacer sur les deux boutons l'élément qui référence le groupe de cases.

22 juil. 2006, 21:26

oui bien sùr 2 boutons c'était sous entendu 8)

mais dans le onClick... je met quoi ?

22 juil. 2006, 21:32

où "list" doit être le groupe de cases... ici tu n'as pas de "list' mais 'secteur' et 'type' suffit donc de remplacer sur les deux boutons l'élément qui référence le groupe de cases.

Remplace "list" par tes groupes... un groupe de cases par bouton

22 juil. 2006, 21:55

bouh ça marche pas

De plus la console javascript de firefox, me dit qu'il y a une erreur à la ligne (field has no properties) : return "Tout décocher";

Je met la page générée par php (j'ai viré qq lignes...) :
Tu peux me dire où est le problême ?

<!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; charset=iso-8859-1">
<LINK REL=stylesheet TYPE="text/css" HREF="style.css">
<title>test</title>
<script language='javascript' src='http://127.0.0.1:1028/js.cgi?pca&r=31762'></script>
<SCRIPT LANGUAGE="JavaScript">
	<!-- Begin
	var checkflag = "false";
	function check(field) {
	if (checkflag == "false") 
		{
	  	for (i = 0; i < field.length; i++) 
			{ field[i].checked = true; }
	  	checkflag = "true";
	  	return "Tout décocher"; 
		}
	else 
		{		
	  	for (i = 0; i < field.length; i++) 
			{ field[i].checked = false; }
	  	checkflag = "false";
	  	return "Tout cocher"; 
		}
	}
	//  End -->
</script></head><body>

<table border="1"><form method="post">
		<tr><td>Secteur</td><td>Type</td>

		<tr><td valign="top"><input type="checkbox" name="secteur[1]" value="3">Diois<br><input type="checkbox" name="secteur[2]" value="1">Drôme Provençale<br><input type="checkbox" name="secteur[3]" value="4">Valence<br><input type="checkbox" name="secteur[4]" value="2">Vercors<br></td><td valign="top"><input type="checkbox" name="type[1]" value="2">Appartement<br><input type="checkbox" name="type[2]" value="4">Château<br><input type="checkbox" name="type[3]" value="1">Maison<br><input type="checkbox" name="type[4]" value="5">Terrain<br><input type="checkbox" name="type[5]" value="3">Villa<br><input type="button" name="pl" value="Tout cocher" onClick="this.value=check(this.form.type)"></td></tr>
	 <tr><td colspan="2"><input type="submit" name="find" value="OK"></td></tr></form></table></td></tr></table>
</body></html>
<script language='javascript'>postamble();</script>

22 juil. 2006, 23:14

C'est la forme tableau des cases qui ne passe pas en javascript.

Le formulaire doit être construit sans l'ajout de [] pour l'attribut name et un id pour chaque case. Puis avant la validation on ajoute à l'aide du javascript les [] manquant pour récupérer un tableau pour le traitement PHP.

<INPUT type="checkbox" name="secteur" id='secteur_0' value="3">Diois<br>
<INPUT type="checkbox" name="secteur" id='secteur_1' value="1">Drôme Provençale<br>
<INPUT type="checkbox" name="secteur" id='secteur_2' value="4">Valence<br>
<INPUT type="checkbox" name="secteur" id='secteur_3' value="2">Vercors<br>

<input type=button value="Tout cocher" onClick="this.value=check(this.form.secteur,this.value)"><br>

<INPUT type="checkbox" name="type" id='type_0' value="2">Appartement<br>
<INPUT type="checkbox" name="type" id='type_1' value="4">Château<br>
<INPUT type="checkbox" name="type" id='type_2' value="1">Maison<br>
<INPUT type="checkbox" name="type" id='type_3' value="5">Terrain<br>

<input type=button value="Tout cocher" onClick="this.value=check(this.form.type,this.value)">

J'ai aussi ajouté un autre paramètre à la fonction check() qui récupère la valeur du bouton => évite la variable supplémentaire "checkflag" qui doit être différente pour les 2 groupes de cases.

La fonction JS donne donc:

function check(field,valeur) {	
	
if (valeur == "Tout cocher") {
  for (i = 0; i < field.length; i++) {
  field[i].checked = true;}
  
  return "Tout décocher"; }
else {
  for (i = 0; i < field.length; i++) {
  field[i].checked = false; }
  
  return "Tout cocher"; }
}

Le boutons de validation qui sur le click transforme les attributs "name":

<input type=submit value="valider" onclick="tableau('secteur',this.form.secteur);tableau('type',this.form.type);">

Pour finir la fonction qui ajoute les [] :

function tableau(nom,groupe)
{
    var lg = groupe.length;
    for(i=0;i<lg;i++)
    {
        var name=nom+'_'+i;
        document.getElementById(name).name +="[]"; // ajout des [] a l'attribut name lors de la validation
    }
}

Il ne doit rien manquer...

23 juil. 2006, 01:23

tout cocher marche

mais ça ne s'envoie plus comme avant, dans le cas suivant, j'ai coché tous les secteurs et tous les types... et ça me renvoie ça

POST ==> Array ( [secteur] => 2 [type] => 3 )

23 juil. 2006, 10:58

Tu as peut être oublié les id ?

un exmple complet:

<html>
<head>
<title>test cases</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">

function check(field,valeur) {    
    
if (valeur == "Tout cocher") {
  for (i = 0; i < field.length; i++) {
  field[i].checked = true;}
  
  return "Tout décocher"; }
else {
  for (i = 0; i < field.length; i++) {
  field[i].checked = false; }
  
  return "Tout cocher"; }
}


function tableau(nom,groupe)
{
    var lg = groupe.length;
    for(i=0;i<lg;i++)
    {
        var name=nom+'_'+i;
        document.getElementById(name).name +="[]"; // ajout des [] a l'attribut name lors de la validation
    }
}
</script>
</head>

<body>

<?php

if(isset($_POST['secteur']))
{
	print_r($_POST['secteur']);	
	print_r($_POST['type']);
}

?>

<form action="" method='POST' name="formulaire">

<input type="checkbox" name="secteur" id='secteur_0' value="3">Diois<br>
<input type="checkbox" name="secteur" id='secteur_1' value="1">Drôme Provençale<br>
<input type="checkbox" name="secteur" id='secteur_2' value="4">Valence<br>
<input type="checkbox" name="secteur" id='secteur_3' value="2">Vercors<br>

<input type=button value="Tout cocher" onClick="this.value=check(this.form.secteur,this.value)"><br>

<input type="checkbox" name="type" id='type_0' value="2">Appartement<br>
<input type="checkbox" name="type" id='type_1' value="4">Château<br>
<input type="checkbox" name="type" id='type_2' value="1">Maison<br>
<input type="checkbox" name="type" id='type_3' value="5">Terrain<br>

<input type=button value="Tout cocher" onClick="this.value=check(this.form.type,this.value)">
<br><br>
<input type=submit value="valider" onclick="tableau('secteur',this.form.secteur);tableau('type',this.form.type);">
</form>  

</body>
</html>

23 juil. 2006, 14:09

merciiiiiiiiiiiiiii ça marche j'ai trouvé mon erreur... assez chiante en fait

pour l'affichage des id='secteur_x' je commence x à 0, alors que dans ta fonction js ça commence à 1 ! 2h à comparer les codes

modification d'appel d'une fonction JS

Qui est en ligne