[AJAX] Evenement dans une liste

**dieudo** · 18/01/2008, 21h09

bonjour,
J'ai un formulaire dans lequel il ya deux champs SELECT et j'aimerais que lorsqu'on fait une selection dans le 1er, on remplit le 2eme par une requete dans une base de donnée en se servant de la donnée selectionnée dans le 1er instantanement

Quelqu'un aurait une piste???

**ghaoui** · 19/01/2008, 09h43

je le fais pour toi esperons qu il va t aider :p:p

la base:

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
-- phpMyAdmin SQL Dump
-- version 2.6.1
-- http://www.phpmyadmin.net
-- 
-- Serveur: localhost
-- Généré le : Samedi 19 Janvier 2008 à 09:38
-- Version du serveur: 4.1.9
-- Version de PHP: 4.3.10
-- 
-- Base de données: `select`
-- 
 
-- --------------------------------------------------------
 
-- 
-- Structure de la table `selec`
-- 
 
CREATE TABLE `selec` (
  `id` int(11) NOT NULL auto_increment,
  `nom` varchar(100) NOT NULL default '',
  `age` int(11) NOT NULL default '0',
  KEY `id` (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;
 
-- 
-- Contenu de la table `selec`
-- 
 
INSERT INTO `selec` VALUES (1, 'hamdi', 14);
INSERT INTO `selec` VALUES (2, 'ali', 15);
INSERT INTO `selec` VALUES (3, 'mohamed', 15);
INSERT INTO `selec` VALUES (4, 'saleh', 14);
INSERT INTO `selec` VALUES (5, 'farida', 15);
INSERT INTO `selec` VALUES (6, 'mounira', 17);
INSERT INTO `selec` VALUES (7, 'jihed', 14);
INSERT INTO `selec` VALUES (8, 'fathi', 18);
INSERT INTO `selec` VALUES (9, 'ahmed', 17);
INSERT INTO `selec` VALUES (10, 'wajdi', 15);

le fichier php contenant la requette:selectuser.php

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
<?php
header('Content-Type: text/xml'); 
echo "<?xml version=\"1.0\"?>\n";
echo "<exemple>\n";
 
//
$link=mysql_connect("localhost", "root", "");
mysql_select_db("select", $link);
 
$req="select * from selec where age='".$_GET["age"]."'";
$res=mysql_query($req);
//sleep(5);
 
while ($rows = mysql_fetch_array($res))
{
	echo "<donnee>";echo $rows["nom"];echo "</donnee>\n";
}
echo "</exemple>\n";
?>

le fichier contenant ajax et ... les select :p:p selectexemple.php:

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<html>
	<head>
		<title>test select</title>
		<script type='text/JavaScript'>
 
	 		function getXhr(){
                                xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function getselect(){
			var selectvar="";
			//var a=new String;
				xhr = getXhr()
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState != 4){
						document.getElementById("msg").innerHTML="<img src=\"img.gif\" width=\"16\" height=\"16\"> chargement des noms ...";
					}else if(xhr.readyState == 4){
					document.getElementById("msg").innerHTML="";
						docXML= xhr.responseXML;
	                    items = docXML.getElementsByTagName("donnee");
						selectvar="<select>";
	                    for (i=0;i<items.length;i++)
	                   {
		             selectvar=selectvar+"<option>"+items.item(i).firstChild.data+"</option>";
	                   }
					  selectvar=selectvar+"</select>";
 
					  document.getElementById("monselect").innerHTML=selectvar;
					}
				}
				xhr.open("GET","selectuser.php?age="+monform.age.options[monform.age.selectedIndex].value,true);
				xhr.send(null);
			}
 
 
		</script>
	</head>
	<body>
	<form name="monform" id="monform">
	<select name="age" onChange="getselect();">
	  <option value="10">10</option>
	  <option value="11">11</option>
	  <option value="12">12</option>
	  <option value="13">13</option>
	  <option value="14">14</option>
	  <option value="15">15</option>
	  <option value="16">16</option>
	  <option value="17">17</option>
	  <option value="18">18</option>
	  <option value="19">19</option>
	  <option value="20">20</option>
    </select>
	<div id="msg"></div>
	<div id="monselect">
	<select name="nom">
	  <option>aucun</option>
    </select>
	</div>
	</form>
	</body>
</html>

n oublie pas de me repondre :p:p

**Kahlyv** · 21/01/2008, 19h14

je crois qu'il a oublié ^^

**dieudo** · 23/01/2008, 09h26

ça marche!! merci

[AJAX] Evenement dans une liste

JavaScript

Discussions similaires

Partager

Partager