Ajax liste deroulante qui alimente plusieurs champs texte

Résolu
alone06 Messages postés 115 Date d'inscription mardi 9 novembre 2010 Statut Membre Dernière intervention 18 mai 2016 - 4 juil. 2014 à 23:10
alone06 Messages postés 115 Date d'inscription mardi 9 novembre 2010 Statut Membre Dernière intervention 18 mai 2016 - 8 juil. 2014 à 00:07
Bonjour,
J'ai un soucis avec les listes deroulantes, je sais que c'est un peu bete mais je ne m'y connais pas du tout en ajax, j'ai fais quelques recherches et je suis arrivé à afficher les données sur un seul champs texte alors que je veux le faire sur 5.
Voici mon code :
Pour la page html :
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<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 qui sera appelée sur le click du bouton
			*/
			function go(){
				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
						document.getElementById('desc').innerHTML = leselect;
						
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax.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, l'id de l'auteur
				sel = document.getElementById('page');
				id_page = sel.options[sel.selectedIndex].value;
				xhr.send("id_page="+id_page);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Pages</label>
				<select name='page' id='page' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
						include "dataconn.php";
$rep2 = mysql_query("SELECT * FROM pages ORDER BY nom_page ASC");
						while($row = mysql_fetch_assoc($rep2)){
							echo "<option value='".$row["id_page"]."'>".$row["nom_page"]."</option>";
						}
					?>
				</select>
				<label>desc</label>
				<div id='desc' style='display:inline'>
				<input type="text" name='desc' value="">
				</div>
			</fieldset>
		</form>
	</body>
</html>

et ici le code du script ajax.php :
<?php
	echo "<input type='text' name='desc' value='";
	if(isset($_POST["id_page"])){
		
						include "dataconn.php";

		$res = mysql_query("SELECT * FROM pages 
			WHERE id_page=".$_POST['id_page']."");
		while($row = mysql_fetch_array($res)){
			echo $row["desc"];
		}
	}
	echo "'>";
?>

comme je l'ai expliqué je voudrais récupérer plusieurs champs texte qui correspondent au enregistrement sur la meme table pour pouvoir les modifier et les reenregistrer.
Je vous remercie d'avance pour votre aide.

11 réponses

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
Modifié par jordane45 le 5/07/2014 à 01:11
Bonjour,

Déjà :
Pas besoin de passer par du js pour récupérer la value de l'élément sélectionné dans ton select... Il suffit de le passer en paramètre de ta fonction.

Ensuite... tu ne créés pas dans ton fichier php (ajax) l'input qui va recevoir la valeur....
Tu l'écris depuis ton code javascript...
=> pour un input on utiliser le Value ( et non le innerHTML)


function go(id_page){
var xhr = getXhr();
xhr.onreadystatechange = function(){
  if(xhr.readyState == 4 && xhr.status == 200){
  leselect = xhr.responseText; 
      
  document.getElementById('input_desc').value= leselect;
 }
}
xhr.open("POST","ajax.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("id_page="+id_page);
}



Fichier ajax (PHP)
<?php
include "dataconn.php";
if(isset($_POST["id_page"])){
    $sql="SELECT * 
             FROM pages 
        WHERE id_page='$_POST['id_page']'";
   $res = mysql_query($sql);
   while($row = mysql_fetch_array($res)){
    echo $row["desc"];
    }
}


<div id='div_desc' style='display:inline'>
 <input type="text" name="desc" id="input_desc" value="">
</div>


.... pour ce qui est de ta question à proprement parlé.... je ne la comprend pas...
Peux tu la reformuler en étant le plus précis possible ??

Avant de poser une question, merci de lire la charte du site.
Cordialement, Jordane
0