[AJAX] Ajax + remplir un input à partir du choix d'une liste déroulante
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:
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 </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 </label>
<input id="idNomAnimal" name="idNomAnimal" type="text" value="" />
<br />
</div>
</fieldset>
</form>
</body>
</html> |
ensuite un fichier ajaxFiche.js
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
|
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:
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 ;)
