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

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

AJAX

Vue hybride

Discussions similaires

Partager

Partager