[AJAX] Ajax formulaire préremplir lors d'une saisie

Version imprimable

Bonjour à tous,

J'ai un petit problème :(

Je m'explique alors j'ai un petit formulaire ou je dois renseigner un identifiant

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
<!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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="ajax.js"></script>
			<title>Mon site </title>
	</head>
		<body>
			<table border="1">
				<tr>
					<td>identification</td><td><input type="text" id="id" onblur="remplir();"></td>
				</tr>
				<tr>
					<td>libelle</td><td><input type="text" id="id"><div id="libelle"></div></td>
				</tr>
				<tr>
					<td>classe</td><td><input type="text" id="id"><div id="libelle"></div></td>
				</tr>
				<tr>
					<td>description</td><td><input type="text" id="id"><div id="libelle"></div></td>
				</tr>
			</table>
			<div id='log'></div>
</body>
</html>

dès que cette manipe et passée je dois avoir les autres champs rempli par rapport à l'identifiant

voici mon code ajax

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function remplir()
{
var xhr = new XMLHttpRequest();
var id = document.getElementById('id').value;
 
	xhr.onreadystatechange = function() 
	{
 
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
		{
 
			leselect = xhr.responseText;
			document.getElementById('log').innerHTML = leselect;
		}
 
	};
 
	xhr.open("POST","remplir.php",true);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhr.send("id="+id);	
 
}

je voudrais afficher chaque resultat dans les différents div de mon formulaire

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
include('inc_connexion.php');
connexion();
 
$id = $_POST['id'];
 
$requete= "select *  from essaie where id='$id'";
$resultat=mysql_query($requete);
$ligne=mysql_fetch_array($resultat);
 
echo $ligne['libelle'];
echo  $ligne['note'];
echo  $ligne['description'];
?>

si quelqu'un a une solus je suis preneur. :ccool:

25/06/2012, 10h40
Bovino

Il ne faut pas faire des echo comme ça.
Il faut que tu structures la réponse de façon à pouvoir l'exploiter dans ta fonction de rappel JavaScript (par exemple avec le format JSON) afin de pouvoir identifier facilement chaque élément à insérer et l'intégrer dans les champs correspondants de ton formulaire.

Merci Bovino pour ta réponse en effet je viens de modifier un peu mon fichier et j'arrive à afficher mes réponses de façon séparer voici mon code

Ajax

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
function remplir()
{
var xhr = new XMLHttpRequest();
var id = document.getElementById('id').value;
 
	xhr.onreadystatechange = function() 
	{
 
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
		{
 
			reponse = xhr.responseText;
			var longueur = reponse.length;
			var tab = reponse.split("|");
			var span = document.getElementsByTagName('span');
 
			for (i=0;i<longueur;i++)
			{
				span[i].innerHTML+= tab[i];
			}
		}
 
	};
 
	xhr.open("POST","remplir.php",true);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhr.send("id="+id);	
 
}

PHP

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<?php
include('inc_connexion.php');
connexion();
 
$id = $_POST['id'];
 
$requete= "select *  from essaie where id='$id'";
$resultat=mysql_query($requete);
$ligne=mysql_fetch_array($resultat);
 
echo $ligne['libelle']."|".$ligne['note']."|".$ligne['description'];
?>

25/06/2012, 11h01
Bovino
Utiliser un séparateur personnalisé est effectivement une méthode efficace, mais attention

Code:

var span = document.getElementsByTagName('span');

cela signifie que tu n'as que trois balises <span> dans la page... ce qui n'est pas forcément le cas.
Essaye peut-être d'utiliser des identifiants à la place.
Par exemple, chaque span devant être mis à jour à un identifiant spécifique et dans ta réponse, tu ajoutes le champ auquel la valeur correspond.
Cela nécessite un nouveau séparateur

Code:

echo "libelle<>".$ligne['libelle']."|note<>".$ligne['note']."|description<>".$ligne['description'];

et dans le JavaScript
Code:

1 2 3 4 5 var tab = reponse.split("|"); tab.forEach(function(elem){ var valeurs = elem.split('<>'); document.getElementById(valeurs[0]).innerHTML = valeurs[1]; });
25/06/2012, 11h24
fano97one

Ah oui :mrgreen: en effet ça me semble plus propre comme code
Je te remercie beaucoup pour ton aide :ccool:

J'aurai une autre question comment pourrai-je placer mes réponses directement dans mes input de mon formulaire et non dans un span ou div

Fichier HTML

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
 
<!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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="ajax.js"></script>
		<title>Mon site </title>
	</head>
		<body>
			<table border="1">
				<tr>
					<td>identification</td><td><input type="text" id="id" onblur="remplir();"></td>
				</tr>
				<tr>
					<td>libelle</td><td><input type="text" id"="log"></td>
				</tr>
				<tr>
					<td>classe</td><td><input type="text" id"="log"></td>
				</tr>
				<tr>
					<td>description</td><td><input type="text" id"="log"></td>
				</tr>
			</table>
</body>
</html>

25/06/2012, 11h52
Bovino

En utilisant la propriété value des champs de formulaires au lieu de innerHTML.
25/06/2012, 12h29
fano97one

Ok merci pour toutes tes réponses :ccool: