[AJAX] traitement de checkbox

**php_de_travers** · 17/11/2008, 15h42

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 :

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
<!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.

**php_de_travers** · 07/03/2009, 12h22

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

**marcha** · 10/03/2009, 17h44

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**php_de_travers** · 22/04/2009, 21h32

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 ?

**andry.aime** · 24/04/2009, 07h33

Salut

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**php_de_travers** · 25/04/2009, 21h29

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

Code :

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

[AJAX] traitement de checkbox

AJAX

Vue hybride

Discussions similaires

Partager

Partager