[Ajax] Remplir un formulaire

après choix dans une liste déroulante

20 octobre 2008 à 23:03:50

Bonjour

Comme je n'arrive plus à avancer sur mon code, je viens faire appel à vous.
J'ai une liste déroulante à choix multiple alimentée par une requête SQL, et une fois que je clique sur un élément de cette liste, j'aimerai que le formulaire qui se trouve à côté se remplisse avec les informations correspondantes à ma sélection.

Ex :
liste :
- titi
- toto -> click sur toto
- tutu

dès le click, les champs nom,prenom,age se remplissent :
nom : toto
prenom : otot
age : 12

J'ai donc deux pages .php :
- saisie.php : avec new XMLHttpRequest (etc ...) ainsi que le code de ma liste déroulante
- Ajax.php : où j'ai juste un "echo 'plop';" pour le moment.

En fait, je ne vois pas dans quelle page placer mes éléments du formulaire à remplir (input text, textarea), et ni où est-ce que je dois écrire le fait que les champs se rempliront. Ni comment d'ailleurs.

Voici ma page saisie.php :

<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 appelée dès click sur un élément de la liste déroulante
			function go(){
				var xhr = getXhr()
				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){
						alert(xhr.responseText);
					}
				}
				// On envoie la page dans laquelle se trouve l'action à faire dès click sur un élément
				xhr.open("GET","Ajax.php",true);
				xhr.send(null);
			}
</script>
		
<?php

include("maBase.php");

$lien = connect();

// requête de sélection pour afficher dans la liste déroulante
$req_nom = 'SELECT * FROM table1;';

// Affichage de la liste déroulante
echo '<select id="nom" name="nom" multiple size="8">';
$res = mysql_query($req_nom) or die (mysql_error());
// Affichage des valeurs dans la liste
while ($ligne = mysql_fetch_array($res))
{
	echo '<option value='.$ligne[0].' onClick="go();">'.$ligne[1].'</option>';
}
echo '</select>';
?>

Et ma page Ajax.php où je ne sais pas exactement ce que je suis censée mettre dedans :

<?php

echo 'plop';

?>

J'ai déja effectué une recherche sur le forum et sur Google mais je ne trouve pas exactement mon problème

Si vous pouviez m'aider, ça me ferait plaisir (et ça me permettrait de mieux comprendre Ajax également)

Merci !

Attonde

21 octobre 2008 à 18:33:26

à la place de

alert(xhr.responseText);

Tu pourrais mettre

make(xhr.responseText);

Avec une fonction qui se charge d'afficher

function make(valeur) {
getElementById('id').value = valeur;
}

Après pour le faire pour plusieurs éléments il vaudrait mieux que tu renvoies les données du fichier PHP en XML.
(ou Json, c'est pratique ce ptit "encodage")

Il y a un petit exemple là: http://www.siteduzero.com/tutoriel-3-4 [...] tml#ss_part_8
Après c'est un peu compliqué parce qu'il faut gérer les noeuds xml (ou les balises si tu préfères) via javascript, c'est un peu chiant..

baggie

21 octobre 2008 à 19:02:51

Merci beaucoup pour ta réponse ! Mais ma "valeur" à ma fonction "make" est censée être un des champs de ma requête SQL, hors passer du SQL dans le Javascript ... je ne vois pas comment faire :/

J'ai testé ceci aussi :

function choicenom()
{
	document.form_nom.prenom.value = document.form_nom.liste_nom.options[document.form_nom.liste_nom.selectedIndex].text;
 
	document.form_nom.age.value = document.form_nom.liste_nom.options[document.form_nom.liste_nom.selectedIndex].text;
 
}

Sauf que quand je fais ce code là, j'affiche bien dans les champs que je veux, mais je n'affiche que le premier élément demandé dans ma requête SQL :/ Y'aurait-il un autre moyen de faire ça avec ce code ?

Attonde

22 octobre 2008 à 18:12:24

Il faut que tu utilise le code renvoyé par Ajax.php

.

Fait avec XML comme je t'ai dis!

<?php 
                
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>";

//Connexion MySQL
while(/* ta boucle mysql */) {
echo '<' . $nomDeLaBalise . '>';
echo $valeurAAjouter;
echo '</' . $nomDeLaBalise . '>';
}
 
?>

[m'en fou je te coderais pas ton truc avec moi tu vas devoir travailler, je suis là juste pour aider]

baggie

23 octobre 2008 à 17:40:59

Merci Attonde !
Je ne peux pas tester pour le moment, mais ta solution signifierait donc que je dois faire ceci :

<?php 
                
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>";

//Connexion MySQL
while($ligne=mysql_fetch_array($res)) {
echo '<'.$nom.'>';
echo $valeurAAjouter;
echo '</'.$nom.'>';
}
 
?>

avec $res ma requête écrite avant et $valeurAAjouter = $ligne[0] par exemple ?

Attonde

23 octobre 2008 à 18:53:25

Oui et non, tu oublies la variable "nom" qui est quand même importante

.
Après il faut gérer ça en JS, c'est là que ça se complique

...