[AJAX] Ajax + remplir un input à partir du choix d'une liste déroulante

**sofuzion** · 04/08/2009, 19h30

Bonjour tout le monde ^^

J'ai un petit problème !
Je dispose d'une liste déroulante avec plusieurs choix
Selon le choix sélectionné par l'utilisateur j'aimerais afficher du texte dans un input

j'ai donc un fichier
essai.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
 
<html>
<head>
<script type="text/javascript" src="js/ajaxFiche.js"></script>
</head>
<body>
<form>
	<fieldset>
 
		<legend> Modifier une fiche animal </legend>
 
		<label>Animal &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
		<div id='nom'>
			<select name='nom' id='nom' onchange='fiche()'>
				<option value='Neige'> Neige</option>
				<option value='iris'> Iris </option>
			</select>
		</div>
		<br />
		<br />
 
		<div id='idNomAnimal'>
			<label> Nom de l animal &nbsp;&nbsp;</label>
			<input id="idNomAnimal" name="idNomAnimal" type="text" value="" />
			<br />	
		</div>
	</fieldset>
</form>
</body>
</html>

ensuite un fichier ajaxFiche.js

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
 
 
 
	function getXhr()
	{
        var 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;
	}
 
	function fiche()
	{
		var 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 && xhr.status == 200)
			{
				leselect = xhr.responseText;
				// On se sert de innerHTML pour rajouter les options a la liste des noms des animaux
				document.getElementById('idNomAnimal').innerHTML = leselect;
			}
		}
 
		// Ici on va voir comment faire du post
		xhr.open("POST","ajaxFiche.php",true);
		// ne pas oublier ça pour le post
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		// ne pas oublier de poster les arguments
		// ici, le nom de la catégorie sélectionnée
		sel = document.getElementById('nom');
		categorie = sel.options[sel.selectedIndex].value;
		xhr.send("nom="+nom);
	}

et un fichier ajaxFiche.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
	$nomAnimal = $_POST["nom"];
	echo "ok nom";
	echo $nomAnimal;
 
	echo "<select name='fiche'>";
 
	$connect= mysql_connect("localhost", "root","") or die ("Impossible de se connecter: ".mysql_error());
	mysql_select_db("test") or die("Base de données inaccessible : ".mysql_error($connect));
 
 
?>

Je suis un peu perdue -_-
Je ne comprends pas pourquoi mon echo dans le fichier "ajaxFiche.php" ne se fait pas ..

J'ai du faire une erreur mais je ne trouve pas :/

Si quelqu'un à une idée , une suggestion !

Merci d'avance

**Bovino** · 04/08/2009, 20h14

Salut,
Probablement parce que tu n'envoies pas la bonne valeur :

Code :

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

1
2
categorie = sel.options[sel.selectedIndex].value;
xhr.send("nom="+nom);

ce ne serait pas plutôt :

Code :

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

1
2
categorie = sel.options[sel.selectedIndex].value;
xhr.send("nom="+categorie);

**andry.aime** · 05/08/2009, 08h21

Bonjour,
Attention, tu as deux fois l'id idNomAnimal, un id doit être unique.

Selon le choix sélectionné par l'utilisateur j'aimerais afficher du texte dans un input

Pourquoi tu mets une balise select dans le retour:

echo "<select name='fiche'>";

**sofuzion** · 06/08/2009, 14h01

@Bovino : exact dans le code que j'ai mis :p ya une petite erreur de copier coller =)

@andry.aime : bien vu pour l'id j'ai changé

et le select c'est parce que je n'ai pas mis tout le reste du code assez long !
j'aurais pas du le mettre

sinon je voulais savoir
en fait, j'ai deux listes déroulantes liées
donc l'utilisateur sélectionne une catégorie présentes dans la première liste
à partir de là, la deuxième se met à jour grâce à ajax (j'y rajoute des options)

et ensuite l'utilisateur sélectionne un nom à partir de la deuxième liste et là j'aimerais donc afficher des informations présentes en bdd, les mettre dans des input et autre ^^

pourtant je fais exactement la même chose .. je ne comprends pas pourquoi cela ne fonctionne pas

trop d'ajax tue l'ajax ? :p

**andry.aime** · 06/08/2009, 15h01

Pour les 2 listes liées, utilises un retour XML pour charger ton second liste, utiliser innerHTML pour changer ou créer un élément pose souvent des problèmes.
http://www.developpez.net/forums/d77...te-liees-ajax/
Pour remplir les input, tu fais de même façon mais au lieu de remplir une liste,
tu mets le contenu de l' XML dans les input avec le onchange de la seconde liste.

**sofuzion** · 06/08/2009, 15h03

oki merci pour la rapidité de ta réponse

je vais tester ça de suite !

**sofuzion** · 06/08/2009, 16h38

oki mes deux premières listes c'est ok
j'ai remplie la première à la main, ensuite la deuxième s'actualise selon le choix dans la première

sinon au niveau de change2() :

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
 
function change2()
			{	
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function()
				{
					var rst = xhr.responseXML;
					var items=rst.getElementsByTagName('element');
					document.getElementById('id_def').options.length=0;
					for(var i=0;i<items.length;i++)
					{
						var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true)
						document.getElementById('id_def').options[i]=myOption;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxId_Def.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel2 = document.getElementById('nom');
				nom = sel2.options[sel.selectedIndex].value;
 
				sel = document.getElementById('prenom');
				prenom = sel.options[sel.selectedIndex].value;
 
				xhr.send("Prenom="+prenom + "&Nom="+nom);		
			}

je ne sais pas trop comment faire pour mettre un input à la place de la liste

**andry.aime** · 07/08/2009, 08h41

Bonjour,
Par exemple si ton php retourne:

Code XML :

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

1
2
3
4
5
6
<?xml version="1.0" encoding="ISO-8859-1"?>
<racine>
<titre>Livre1</titre>
<isbn>12312321</isbn>
<publication>12/10/2008</publication>
</racine>

Code HTML :

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

1
2
3
Titre :<input type="text" id="titre" />
Isbn :<input type="text" id="isbn" />
Date de publication<input type="text" id="pub" />

Code :

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

1
2
3
document.getElementById('titre').value=rst.getElementsByTagName('titre')[0].firstChild.nodeValue;
document.getElementById('isbn').value=rst.getElementsByTagName('isbn')[0].firstChild.nodeValue;
document.getElementById('pub').value=rst.getElementsByTagName('publication')[0].firstChild.nodeValue;

**sofuzion** · 07/08/2009, 20h06

Merci de l'aide

J'ai essayé mais ça ne fonctionne toujours pas ..
On dirait que change2() ne fonctionne pas .. rien n'est déclenché

mon code :
essai.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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
<html>
	<head>
		<script type='text/javascript'>
			function getXhr(){
                                var 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 change()
			{	
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function()
				{
					var rst = xhr.responseXML;
					var items=rst.getElementsByTagName('element');
					document.getElementById('nom').options.length=0;
					for(var i=0;i<items.length;i++)
					{
						var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true)
						document.getElementById('nom').options[i]=myOption;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxListe.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('categorie');
				categorie = sel.options[sel.selectedIndex].value;
				xhr.send("Categorie="+categorie);			
			}
 
			function change2()
			{	
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function()
				{
					var rst = xhr.responseXML;
 
					document.getElementById('inputNom').value=rst.getElementsByTagName('inputNom')[0].firstChild.nodeValue;
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxFiche.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('nom');
				nom = sel.options[sel.selectedIndex].value;
 
				xhr.send("Nom="+nom);		
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 600px">
				<legend>Liste liées</legend>
				<label>Catégories</label>
				<select name='categorie' id='categorie' onchange='change()'>
					<option value='-1'>Aucun</option>
					<option value="chat"> Chat </option>
					<option value="chaton"> Chaton </option>
				</select>
				<label>Noms</label>
				<div id='noms' style='display:inline' >
				<select name='nom' id='nom' onchange='change2()'>
					<option value='-1'>Choisir un nom</option>
				</select>
				</div>
				<label>Fiche</label>
				<div id='fiches' style='display:inline' >
				<input id='inputNom' name='nomFiche' type='text' />
				</div>
 
			</fieldset>
		</form>
	</body>
</html>

ajaxListe.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
 
<?php
	echo "ok";
	header("Content-type:text/xml");
	echo '<?xml version="1.0" encoding="ISO-8859-1"?>';
    echo "<racine>";
	if(isset($_POST["Nom"]))
	{
		$connect= mysql_connect("localhost", "root","") or die ("Impossible de se connecter: ".mysql_error());
		mysql_select_db("bdd_arche") or die("Base de données inaccessible : ".mysql_error($connect));
		$res = mysql_query("SELECT * FROM fiche WHERE Nom='".$_POST["nom"]."' ");
		while($row = mysql_fetch_assoc($res))
		{
			echo '<inputNom>';
			echo ".$row["nom"].";
			echo '</inputNom'>;
		}
	}
	echo "</racine>";
	mysql_close ($connexion); // Fermeture de la connexion a la bdd 
?>

ajaxFiche.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
 
<?php
	header("Content-type:text/xml");
	echo '<?xml version="1.0" encoding="ISO-8859-1"?>';
    echo "<elements>";
	if(isset($_POST["Categorie"]))
	{
		$connect= mysql_connect("localhost", "root","") or die ("Impossible de se connecter: ".mysql_error());
		mysql_select_db("bdd_arche") or die("Base de données inaccessible : ".mysql_error($connect));
		$res = mysql_query("SELECT nom FROM fiche WHERE Categorie='".$_POST["Categorie"]."' ORDER BY nom");
		while($row = mysql_fetch_assoc($res))
		{
			echo '<element>';
            echo "<option>".$row["nom"]."</option>";
            echo '<valeur>'.$row["nom"].'</valeur>';
            echo '</element>';
		}
	}
	echo "</elements>";
 
?>

La deuxième liste se met bien à jour suivant ce que l'on sélectionne dans la première liste !

En revanche, lorsque l'on choisit une des options de la seconde liste ..
rien ne s'affiche dans le input
on dirait que onchange='change2()' n'est même pas appelé ..

Merci pour votre aide !

**Bovino** · 07/08/2009, 21h49

on dirait que onchange='change2()' n'est même pas appelé ..

Ca je te le confirme

onchange est un attribut JavaScript qui contient du code JavaScript, celui-ci n'est donc pas évalué lors d'une insertion dans le DOM, il faut affecter ces événements par script après l'insertion, du style :

Code :

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

1
2
3
4
5
6
7
8
9
10
xhr.onreadystatechange = function(){
	var rst = xhr.responseXML;
	var items=rst.getElementsByTagName('element');
	document.getElementById('nom').options.length=0;
	for(var i=0;i<items.length;i++){
		var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true);
		document.getElementById('nom').options[i]=myOption;
	}
	document.getElementById('nom').onchange = function(){change2();}
}

**andry.aime** · 08/08/2009, 09h33

Si tu veux remplir qu'un seul input, tu n'as pas besoin d'utiliser XML

Code PHP :

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

1
2
3
4
5
6
7
8
9
10
11
12
if(isset($_POST["Nom"]))
	{
		$connect= mysql_connect("localhost", "root","") or die ("Impossible de se connecter: ".mysql_error());
		mysql_select_db("bdd_arche") or die("Base de données inaccessible : ".mysql_error($connect));
		$res = mysql_query("SELECT * FROM fiche WHERE Nom='".$_POST["nom"]."' ");
		while($row = mysql_fetch_assoc($res))
		{
			echo ".$row["nom"].";
		}
	}
	mysql_close ($connexion); // Fermeture de la connexion a la bdd 
?>

Code :

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

1
2
var rst = xhr.responseText;
document.getElementById('inputNom').value=rst;

**sofuzion** · 08/08/2009, 15h37

@andry.aime : je vais garder le xml j'ai plusieurs input

c'est juste que là j'en test un seul pour voir déjà que ça fonctionne ^^

@bovino : j'ai rajouté la ligne

Code :

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

1
2
 
document.getElementById('nom').onchange = function(){change2();}

mais ça ne change rien ...
on dirait toujours qu'on ne rentre pas dans change2()

**Bovino** · 08/08/2009, 15h44

Arf... oui, c'est tellement gros que je ne l'avais même pas vu !

Code :

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

1
2
3
4
5
6
7
8
9
10
xhr.onreadystatechange = function(){
	var rst = xhr.responseXML;
	var items=rst.getElementsByTagName('element');
	document.getElementById('nom').options.length=0;
	for(var i=0;i<items.length;i++){
		var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true);
		document.getElementById('nom').options[i]=myOption;
	}
	document.getElementById('nom').onchange = function(){change2();}
}

Il faut peut-être tester que le readyState soit à 4, sinon, tu lances la fonction avant d'avoir reçu la réponse et forcément, ça marche moins bien.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
	var rst = xhr.responseXML;
	var items=rst.getElementsByTagName('element');
	document.getElementById('nom').options.length=0;
	for(var i=0;i<items.length;i++){
		var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true);
		document.getElementById('nom').options[i]=myOption;
	}
	document.getElementById('nom').onchange = function(){change2();}
    }
}

**sofuzion** · 11/08/2009, 13h42

c'est pas faux ^^
je l'ai rajouté
mais ça ne fonctionne toujours pas ...
arf .. me demande ce qui ne va pas

**andry.aime** · 11/08/2009, 14h35

On peut voir ton code HTML, JS et PHP concernés pour voir?

**sofuzion** · 11/08/2009, 15h04

Oui bien sûr :

voici mon code de ma page essai.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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
<html>
	<head>
		<script type='text/javascript'>
			function getXhr(){
                                var 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 change()
			{	
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function()
				{
					if(xhr.onreadystatechange == 4 && xhr.status = 200)
					{
						var rst = xhr.responseXML;
						var items=rst.getElementsByTagName('element');
						document.getElementById('nom').options.length=0;
						for(var i=0;i<items.length;i++)
						{
							var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true)
							document.getElementById('nom').options[i]=myOption;
						}
						document.getElementById('nom').onchange = function(){change2();}
					}	
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxListe.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('categorie');
				categorie = sel.options[sel.selectedIndex].value;
				xhr.send("Categorie="+categorie);			
			}
 
			function change2()
			{	
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function()
				{
					if(xhr.onreadystatechange == 4 && xhr.status = 200)
					{
						var rst = xhr.responseXML;
 						document.getElementById('inputNom').value=rst.getElementsByTagName('inputNom')[0].firstChild.nodeValue;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxFiche.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel2 = document.getElementById('nom');
				nom = sel2.options[sel2.selectedIndex].value;
 
				xhr.send("Nom="+nom);		
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 600px">
				<legend>Liste liées</legend>
				<label>Catégories</label>
				<select name='categorie' id='categorie' onchange='change()'>
					<option value='-1'>Aucun</option>
					<option value="chat"> Chat </option>
					<option value="chaton"> Chaton </option>
					<option value="chiot"> Chiot </option>
					<option value="chien"> Chien </option>
				</select>
				<label>Noms</label>
				<div id='noms' style='display:inline' >
				<select name='nom' id='nom' onchange='change2()'>
					<option value='-1'>Choisir un nom</option>
				</select>
				</div>
				<label>Fiche</label>
				<div id='fiches' style='display:inline' >
				<input id='inputNom' name='nomFiche' type='text' />
				</div>
 
			</fieldset>
		</form>
	</body>
</html>

le code de ma page ajaxListe.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
 
<?php
	header("Content-type:text/xml");
	echo '<?xml version="1.0" encoding="ISO-8859-1"?>';
    echo "<elements>";
	if(isset($_POST["Categorie"]))
	{
		$connect= mysql_connect("localhost", "root","") or die ("Impossible de se connecter: ".mysql_error());
		mysql_select_db("bdd_arche") or die("Base de données inaccessible : ".mysql_error($connect));
		$res = mysql_query("SELECT nom FROM fiche WHERE Categorie='".$_POST["Categorie"]."' ");
		while($row = mysql_fetch_assoc($res))
		{
			echo '<element>';
			echo "<option>" .$row["nom"]."</option>";
                        echo '<valeur>'.$row["nom"].'</valeur>';
			echo '</element'>;
		}
	}
	echo "</elements>";
	mysql_close ($connexion); // Fermeture de la connexion a la bdd 
?>

et le code de ma page ajaxFiche.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
 
<?php
	header("Content-type:text/xml");
	echo '<?xml version="1.0" encoding="ISO-8859-1"?>';
    echo "<racine>";
	if(isset($_POST["nom"]))
	{
		$connect= mysql_connect("localhost", "root","") or die ("Impossible de se connecter: ".mysql_error());
		mysql_select_db("bdd_arche") or die("Base de données inaccessible : ".mysql_error($connect));
		$res = mysql_query("SELECT * FROM fiche WHERE Nom='".$_POST["nom"]."' ");
		while($row = mysql_fetch_assoc($res))
		{
			echo '<inputNom>';
            echo ".$row["nom"].";
            echo '</inputNom>';
		}
	}
	echo "</racine>";
 
?>

Merci pour votre aide

**andry.aime** · 12/08/2009, 07h36

Re,
Attention à la casse.

xhr.send("Nom="+nom);
.......
isset($_POST["nom"])
.......
WHERE Nom='".$_POST["nom"]."'

C'est valable aussi pour les noms des tables de la base. Sous windows la casse n'est pas respecté pour la base de données mais sous linux oui. Tu pourras avoir des problèmes lors de l'hébergement de ton site.

**jfox** · 24/08/2009, 08h34

En ce qui concerne l'ordre des items, je pense avoir compris le problème (j'ai eu le même!).
Après l'exécution de la fonction change(), les items de la 2nde liste déroulante sont triés en décroissant et celui qui est proposé par défaut est le dernier. Ex: 3 items dans la liste (item1, item2, item3) et c'est item3 qui est affiché alors que cela devrait être item1.
Pour contourner cela, il faut ajouter dans la fonction change(), juste avant l'appel de la fonction change2() la ligne suivante:

Code :

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

1
2
 
document.getElementById('nom').selectedIndex = 0;

**sofuzion** · 25/08/2009, 13h32

Bonjour !

Merci pour votre aide

@andry.aime : merci pour l'info c'est vrai que je n'avais pas fais attention !!
@jfox : l'ordre des items est correct avec ça

merci

Mais sinon j'ai toujours mon problème :/
on dirait que ma fonction change2() n'est jamais appelé ..
elle ne se déclenche jamais ...

**andry.aime** · 25/08/2009, 13h46

Re,
Attention, tu as une erreur sur ton php:

echo '</element'>;

Code :

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

echo '</element>';

Installe Firebug et décrit l'erreur retourner

[AJAX] Ajax + remplir un input à partir du choix d'une liste déroulante

AJAX

Discussions similaires

Partager

Partager