Bonjour à tous,
Je tente de faire mon premier prog AJAX, j'ai une page php qui contient un formulaire et lorsque l'on clique sur un élément de la liste, j'aimerai une autocomplétion des champs restants.
Pour ce faire, je me suis largement inspiré de
http://gael-donat.developpez.com/web/intro-ajax/
paragraphe II-C ... que j'ai tenté d'adapté à mon cas de figure.
Là, j'ai besoin de vous ! xhr.responseXML=null (selon Firebug que j'utilise depuis peu) et évidemment mon code ne fait pas ce que je lui demande jugez plutôt :
AJAX.JS
Code : Tout sélectionner
function ajax()
{
var xhr=null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//on définit l'appel de la fonction au retour serveur
xhr.onreadystatechange = function() { maj_ajax(xhr); };
// je récupére le nom et le prénom de ma chaine
var nom = "";
var prenom = "";
recupNomPrenom(nom, prenom);
//on appelle le fichier reponse.txt en passant les noms, prenoms etc.
xhr.open("GET", "http://127.0.0.1/sessions/reponse.php?login=" + nom + "&prenom=" + prenom, true);
xhr.send(null);
}
function maj_ajax(xhr)
{
var docXML= xhr.responseXML;
document.getElementById(input.nom).value = docXML.getElementsByTagName("nom");
document.getElementById(input.prenom).value = docXML.getElementsByTagName("prenom");
document.getElementById(input.email).value = docXML.getElementsByTagName("email");
}
function recupNomPrenom (nom, prenom){
// --- Recup de la valeur courante :
var val = document.getElementById("userList").options[document.getElementById("userList").selectedIndex].value;
var s = val.toString();
var i = s.lastIndexOf(" ");
var j = s.length;
this.nom = s.substring(0,i);
this.prenom = s.substring(i+1,j);
// --- on fait appel à la fonction php pour remplir les champs de texte
}
REPONSE.PHP
Code : Tout sélectionner
<?php require_once('connexion.php'); ?>
<?php
session_start(); // On relaye la session
header('Content-Type: text/xml');
echo "<?xml version=\"1.0\"?>\n";
// on vérifie la présence des variables de formulaire (si le formulaire a été envoyé)
if(isset($_POST['nom']) && isset($_POST['prenom']){
$user = "SELECT * FROM UTILISATEURS WHERE NOM=\"" . $nom . "\" AND PRENOM=\"" .$prenom . "\"";
mysql_select_db($database_dbprotect, $dbprotect);
$result = mysql_query($user, $dbprotect) or die(mysql_error());
echo "<nom>" . $result[4] . "</nom>" . "\n";
echo "<prenom>" . $result[5] . "</prenom>" . "\n";
echo "<login>" . $result[2] . "</login>" . "\n";
echo "<pass>" . $result[3] . "</pass>" . "\n";
echo "<email>" . $result[6] . "</email>" ."\n";
?>
TEST.HTML (en gros)
Code : Tout sélectionner
<html>
<head>
<script language="javascript" src="ajax.js">
</script>
</head>
<body><table>
<tr>
<td>Nom</td>
<td> <input name="nom" type="text" id="nom">
<tr>
<td>Prénom</td>
<td><input name="prenom" type="text" id="prenom"></td>
</tr>
<tr>
<td width="40">Login</td>
<td width="144"><input name="login" type="text" id="login"></td>
</tr>
<tr>
<td>Mot de passe </td>
<td><input name="pass" type="password" id="pass"></td>
</tr>
<tr>
<td>Email</td>
<td><input name="email" type="text" id="email"></td>
</tr>
</body>
</html>
Bonjour à tous,
Je tente de faire mon premier prog AJAX, j'ai une page php qui contient un formulaire et lorsque l'on clique sur un élément de la liste, j'aimerai une autocomplétion des champs restants.
Pour ce faire, je me suis largement inspiré de
http://gael-donat.developpez.com/web/intro-ajax/
paragraphe II-C ... que j'ai tenté d'adapté à mon cas de figure.
Là, j'ai besoin de vous ! xhr.responseXML=null (selon Firebug que j'utilise depuis peu) et évidemment mon code ne fait pas ce que je lui demande jugez plutôt :
AJAX.JS
[code]
function ajax()
{
var xhr=null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//on définit l'appel de la fonction au retour serveur
xhr.onreadystatechange = function() { maj_ajax(xhr); };
// je récupére le nom et le prénom de ma chaine
var nom = "";
var prenom = "";
recupNomPrenom(nom, prenom);
//on appelle le fichier reponse.txt en passant les noms, prenoms etc.
xhr.open("GET", "http://127.0.0.1/sessions/reponse.php?login=" + nom + "&prenom=" + prenom, true);
xhr.send(null);
}
function maj_ajax(xhr)
{
var docXML= xhr.responseXML;
document.getElementById(input.nom).value = docXML.getElementsByTagName("nom");
document.getElementById(input.prenom).value = docXML.getElementsByTagName("prenom");
document.getElementById(input.email).value = docXML.getElementsByTagName("email");
}
function recupNomPrenom (nom, prenom){
// --- Recup de la valeur courante :
var val = document.getElementById("userList").options[document.getElementById("userList").selectedIndex].value;
var s = val.toString();
var i = s.lastIndexOf(" ");
var j = s.length;
this.nom = s.substring(0,i);
this.prenom = s.substring(i+1,j);
// --- on fait appel à la fonction php pour remplir les champs de texte
}
[/code]
REPONSE.PHP
[code]
<?php require_once('connexion.php'); ?>
<?php
session_start(); // On relaye la session
header('Content-Type: text/xml');
echo "<?xml version=\"1.0\"?>\n";
// on vérifie la présence des variables de formulaire (si le formulaire a été envoyé)
if(isset($_POST['nom']) && isset($_POST['prenom']){
$user = "SELECT * FROM UTILISATEURS WHERE NOM=\"" . $nom . "\" AND PRENOM=\"" .$prenom . "\"";
mysql_select_db($database_dbprotect, $dbprotect);
$result = mysql_query($user, $dbprotect) or die(mysql_error());
echo "<nom>" . $result[4] . "</nom>" . "\n";
echo "<prenom>" . $result[5] . "</prenom>" . "\n";
echo "<login>" . $result[2] . "</login>" . "\n";
echo "<pass>" . $result[3] . "</pass>" . "\n";
echo "<email>" . $result[6] . "</email>" ."\n";
?>
[/code]
TEST.HTML (en gros)
[code]
<html>
<head>
<script language="javascript" src="ajax.js">
</script>
</head>
<body><table>
<tr>
<td>Nom</td>
<td> <input name="nom" type="text" id="nom">
<tr>
<td>Prénom</td>
<td><input name="prenom" type="text" id="prenom"></td>
</tr>
<tr>
<td width="40">Login</td>
<td width="144"><input name="login" type="text" id="login"></td>
</tr>
<tr>
<td>Mot de passe </td>
<td><input name="pass" type="password" id="pass"></td>
</tr>
<tr>
<td>Email</td>
<td><input name="email" type="text" id="email"></td>
</tr>
</body>
</html>
[/code]
