[AJAX] traitement de checkbox

Version imprimable

Bonjour,

je souhaiterais que le fait de cocher/décocher des checkboxes puisse actualiser un DIV à partir d'une requête vers php.

Exemple : liste toutes les personnes qui pratiquent le foot si foot est coché mais aussi toutes celles qui pratiquent le foot ET le basket si foot et basket sont cochés, etc...

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
 
	<script language="JavaScript">
 
	function submitForm()
	{ 
		var req = null; 
 
		document.getElementById("affiche_resultat").innerHTML="Recherche en cours...";
 
		if (window.XMLHttpRequest)
		{
 			req = new XMLHttpRequest();
 
		} 
		else if (window.ActiveXObject) 
		{
			try {
				req = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e)
			{
				try {
					req = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {}
			}
        	}
 
 
		req.onreadystatechange = function()
		{ 
			document.getElementById("affiche_resultat").innerHTML="Wait server...";
			if(req.readyState == 4)
			{
				if(req.status == 200)
				{
					document.getElementById("affiche_resultat").innerHTML = "Voici le résultat de votre recherche : " + req.responseText;
				}	
				else	
				{
					document.getElementById("affiche_resultat").innerHTML = "Error: returned status code " + req.status + " " + req.statusText;
				}	
			} 
		}; 
		req.open("GET", "ma_page_qui_traite_les_requetes.php", true); 
		req.send(null); 
	} 
	</script>
	</head>
 
<body>
<FORM name="ajax" method="POST" action="">
	foot 
	<input type="checkbox" name="foot" id="foot" ONCLICK="submitForm('foot')" /> 
	basket 
	<input type="checkbox" name="basket" id="basket" ONCLICK="submitForm('basket')" /> 
	rugby 
	<input type="checkbox" name="rugby" id="rugby" ONCLICK="submitForm('rugby')" />
</FORM>
 
<div id="affiche_resultat"></div>
</body>
</html>

Est-il possible d'améliorer cette base de script manuellement ?
Si oui, comment ?
Si non, où chercher ?

Et si ça fait le café, juste un seul sucre svp.;)

07/03/2009, 12h22
php_de_travers

Une piste sérieuse :
http://www.askthecssguy.com/examples...mpleFinal.html

Salut,

Une manière relativement simple serait de parcourir la liste
de tes checkbox et de créer une chaine avec les valeurs qui
correspondent aux checkbox cochées, quelque chose dans ce
goût là:
Code:

1 2 3 4 5 6 7 8 var inputs = document.getElementsByTagName('input'); var t = []; for(var i=0;i<inputs.length;i++) { var e = inputs[i]; if(e.type=='checkbox' && e.checked) t.push(e.value); } alert(t.join('-'));
Tu utilise les évènements onchange sur tes checkbox et tu appelles
une seule et même fonction sans paramètre qui s'occupe de la
mise à jour.

dans cette fonction tu fais une requête avec t.join('-') en paramètre. par
exemple:
Code:

1 2 var url = "getdata.php?choix=" + t.join('-');
Coté serveur tu fourni le contenu correspondant.

Maintenant si tu veux éviter de recharger ce qui l'est déjà, ça se complique
un petit peu.

22/04/2009, 21h32
php_de_travers

Bonjour,

après de longues heures passées à chercher une solution pour mettre en place un script ajax + php + mysql qui permette d'afficher les enregistrements correspondants aux critères sélectionnés par clicks sur des checkboxes, je donne ma langue au chat.

Au fait, qui a déjà vu un truc pareil fonctionner sur le net ? Ne serait-ce pas un mouton à 5 pattes ?
Sur le site de Darty, par exemple, cela est réalisé grâce à des techniques du type Flex...

Connaissez-vous des scripts ajax/php qui font cela ?

Salut

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
function fonctionAjax()
{
//tu serialize les checkbox cochés et postes vers le fichier php
//tu mets à jour ton div (liste) à partir du résultat du requête Ajax
}
</script>
</head>
<body><form name="Formulaire">
<input type="checkbox" name="check[0]" onclick="fonctionAjax()">
<input type="checkbox" name="check[1]" onclick="fonctionAjax()">
</form>
<div id="liste"></div>

Voilà ce que j'ai réussi à faire fonctionner grâce à Prototype
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script type="text/javascript"> // <![CDATA[ function tester() { var url = "page.php"; var x; x = Form.serializeElements( $('form1').getInputs('checkbox','mon_choix') ) ; url = url+"?"+x; o_options = new Object(); o_options = {method: 'get',onComplete:afficherReponse}; var laRequete = new Ajax.Request(url,o_options); function afficherReponse(requete) { document.getElementById("div_affiche").innerHTML = requete.responseText } } //]]> </script>
Le problème est que le sérialisation des paramètres génére des trucs aberrants pour le PHP qui les récupère :

*ttp://www.mon_url.com/page.php?mon_choix=1&mon_choix=2&mon_choix=3

-1-Ma question pour résoudre avec le PHP : comment ça se traite, ça en PHP des variables avec le même nom mais des valeurs différentes ?

-2-Question subsidiaire pour éviter le pb dès ajax : existe-t-il une façon un tableau du genre :
*ttp://www.mon_url.com/page.php?mon_choix=1-2-3-4-89-456
En théorie, je peux faire un explode() dans le second cas

Ma solution perso (à valider et/ou améliorer !) :

-1- donner un name différent à chaque checkbox. C'est idiot car habituellement c'est la valeur qui change, mais bon...
Code:

1 2 3 4 <input name="mon_choix_1" type="checkbox" id="choix" value="1" onclick="javascript:tester();"/> 1 <input name="mon_choix_2" type="checkbox" id="choix" value="2" onclick="javascript:tester();"/>2 <input name="mon_choix_3" type="checkbox" id="choix" value="3" onclick="javascript:tester();" />3 <input name="mon_choix_10" type="checkbox" id="choix" value="10" onclick="javascript:tester();" />10
-2- récupérer la valeur des checkboxes de manière "anonyme"

Code:

x = Form.serializeElements( $('form1').getInputs('checkbox') ) ;

-3- dans le php qui reçoit, ne pas traiter les name postés par ajax, mais la variable $_GET elle-même qui arrive sous forme d'un tableau indexé :

Code:

print_r($_GET);

On doit pouvoir exploiter le tableau plus tard de manière "aveugle" en passant à la requête SQL les valeurs en clause OR ce_champ = '2'

PS : c'est sacrément laborieux.
Si, comme je le suppose, il existe une solution plus rapide et propre, je suis preneur.