Ajax liste deroulante qui alimente plusieurs champs texte [Résolu]
alone06
115
Messages postés
mardi 9 novembre 2010Date d'inscription
18 mai 2016
Dernière intervention
-
4 juil. 2014 à 23:10 - Dernière réponse :
alone06
115
Messages postés
mardi 9 novembre 2010Date d'inscription
18 mai 2016
Dernière intervention
- 8 juil. 2014 à 00:07
- Ajax liste deroulante qui alimente plusieurs champs texte
- PHP Liste déroulante qui récupère les champs d'une table » Forum - PHP
- Problème avec ajax liste déroulante tremplie a partir d'une base Au secoooooours » Forum - PHP
- Afficher une liste deroulante, via une zone de texte » Forum - Javascript / DHTML
- Afficher une liste deroulante, via une zone de texte » Forum - PHP
- Liste deroulante dynamique changement par zone texte » Forum - Javascript / DHTML
31 réponses
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)
Fichier ajax (PHP)
.... 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
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
Merci Jordane pour votre reponse,
ma question est la suivante :
j ai d autres champs dans la table pages champs2, champs3
ce que je voudrais et que comme j ai fais pour desc je voudrais faire pour champs2 et champs3
et qu ils se remplissent automatiquement aussi qu'on je fais mon choix dans la liste deroulante
j'espere que j etais assez clair
ma question est la suivante :
j ai d autres champs dans la table pages champs2, champs3
ce que je voudrais et que comme j ai fais pour desc je voudrais faire pour champs2 et champs3
<div id='div_champs2' style='display:inline'> <input type="text" name="champs2" id="input_champs2" value=""> </div> <div id='div_champs3 style='display:inline'> <input type="text" name="champs3" id="input_champs3" value=""> </div>
et qu ils se remplissent automatiquement aussi qu'on je fais mon choix dans la liste deroulante
j'espere que j etais assez clair
Le mieux pour faire de l'AJAX ..serait d'utiliser Jquery ( ne serait-ce déjà que pur sa syntaxe simplifiée...)
http://api.jquery.com/jquery.ajax/
http://fr.openclassrooms.com/informatique/cours/un-site-web-dynamique-avec-jquery/le-fonctionnement-de-ajax
Ce qui te donnera un code du genre :
Ensuite..le mieux est d'encoder le résultat de ta requête en JSON
http://www.lephpfacile.com/manuel-php/function.json-encode.php
http://api.jquery.com/jquery.ajax/
http://fr.openclassrooms.com/informatique/cours/un-site-web-dynamique-avec-jquery/le-fonctionnement-de-ajax
Ce qui te donnera un code du genre :
// Ne pas oublier d'importer jquery.js dans la page
function go(id_page){
$.ajax({
url : 'ajax.php',
data : "id_page="+id_page,
type : 'post',
dataType : 'json',
success : function(data){
// ICI LE CODE POUR REMPLIR TES INPUT
$('#input_desc').val(data.desc);
},
error : function(resultat){
alert(resultat);
}
});
}
Ensuite..le mieux est d'encoder le résultat de ta requête en JSON
http://www.lephpfacile.com/manuel-php/function.json-encode.php
<?php
include "dataconn.php";
if(isset($_POST["id_page"])){
$sql="SELECT *
FROM pages
WHERE id_page='$_POST['id_page']'";
$res = mysql_query($sql);
$result = mysql_fetch_array($res))
echo json_encode($result[0]);
}
?>
Tu verras que la librairie Jquery simplifie grandement la vie des développeurs javascript....
Par exemple... pour mettre une valeur dans un élément tu n'as plus besoin de faire :
A la place tu écris :
Et pour l'AJAX .. plus besoin de créer le getXhr ... c'est Jquery qui gère tout seul.
Pour ce qui est du json... ce n'est rien de plus qu'un "encodage" ...
comme tu peux le voir.. ça ne complexifie pas ton code.. puisque je n'ai ajouté qu'une instruction pour le faire .... json_encode
Par exemple... pour mettre une valeur dans un élément tu n'as plus besoin de faire :
document.getElementById('input_desc').value = mavaleur;
A la place tu écris :
('#input_desc').val(mavaleur);
Et pour l'AJAX .. plus besoin de créer le getXhr ... c'est Jquery qui gère tout seul.
Pour ce qui est du json... ce n'est rien de plus qu'un "encodage" ...
comme tu peux le voir.. ça ne complexifie pas ton code.. puisque je n'ai ajouté qu'une instruction pour le faire .... json_encode
je voudrais juste savoir si c'est comme ça
pour le corps
et pou ajax.php
mais quand je teste je n'est plus de données quand je fais mon chois-x dans la liste deroulante.
quand tu dis
ça veut dire que que je dois mettre les autres input c est ça?
pour le corps
<html>
<head>
<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<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(id_page){
$.ajax({
url : 'ajax.php',
data : "id_page="+id_page,
type : 'post',
dataType : 'json',
success : function(data){
// ICI LE CODE POUR REMPLIR TES INPUT
$('#input_desc').val(data.desc);
},
error : function(resultat){
alert(resultat);
}
});
}
</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='div_desc' style='display:inline'>
<input type="text" name="desc" id="input_desc" value="">
</div>
</fieldset>
</form>
</body>
</html>
et pou ajax.php
<?php
echo "<input type='text' name='desc' value='";
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"];
}
}
echo "'>";
?>
mais quand je teste je n'est plus de données quand je fais mon chois-x dans la liste deroulante.
quand tu dis
// ICI LE CODE POUR REMPLIR TES INPUT
ça veut dire que que je dois mettre les autres input c est ça?
$('#input_champs2').val(data.champs2');
$('#input_champs3).val(data.champs3; Déjà Tu peux virer la fonction getXhr()
Ensuite... il est où le json_encode du fichier ajax (php) ??
Et ..
- data représente les données issues de ta page ajax (ça..tu ne change rien)
- champ2 .. ça doit être le nom d'un champ de ta BDD retourné par ta requête;
si je prend la requête :
j'aurais écrit
input1 et input2 étant les ID de mes inputs à remplir.
Mais avant de te lancer à coup de copier/coller de code (au pif...) prend le temps de lire des tutos sur AJAX / JSON....
Ensuite... il est où le json_encode du fichier ajax (php) ??
ça veut dire que que je dois mettre les autres input c est ça?Oui.. mais attention tu as une apostrophe en trop
Et ..
data.champs2
- data représente les données issues de ta page ajax (ça..tu ne change rien)
- champ2 .. ça doit être le nom d'un champ de ta BDD retourné par ta requête;
si je prend la requête :
SELECT nom,prenom FROM matable
j'aurais écrit
$('#input1').val(data.nom);
$('#input2').val(data.prenom);
input1 et input2 étant les ID de mes inputs à remplir.
Mais avant de te lancer à coup de copier/coller de code (au pif...) prend le temps de lire des tutos sur AJAX / JSON....
le copier coller c etait pour savoir si j etais sur la bonne voie
j'ai lu quelques cours et tutos de json mais honetement je suis encore au point de depart je ne sais pas comment l utiliser (et quel est l'interet de son utilisation)
Json c'est juste un encodage...une autre façon de gérer des variables.. une autre sorte de array en quelques sorte.
j'ai un pop up avec [Object object]Ca c'est normal.... un ALERT ne peut pas afficher directement le contenu d'une variable JSON.... c'est un peu comme en PHP ... faire un echo sur un Array...ça ne passe pas!
Pour voir ce que ta variable contient utilise le console.log()
si c est juste de l encodage donc meme si je ne l utilise pas ça devrait fonctionner n est ce pas?Ca te permet de pouvoir plus facilement manipuler les données issues de ta page php (ajax).....
Si tu ne nous en dit pas plus... on ne pourra pas t'aider...
Quel code utilises tu maintenant ?
Qu'obtiens tu avec des " console.log " ?
...
Quel code utilises tu maintenant ?
Qu'obtiens tu avec des " console.log " ?
...
désolé ça fait 3 jours que je tourne en rond et que je fais des recherches et que lis les tutos sans résultat, je perds la tete que j ai oublié de mettre le code.
j'ai ajouté les autres champs texte et j'ai eu encore le pop up
ajax.php
quand j'utilise firebug pour avoir le resultat consol.log j'ai comme quoi id_page est indefini :(
j'ai ajouté les autres champs texte et j'ai eu encore le pop up
<html>
<head>
<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type='text/javascript'>
function go(id_page){
var req = $.ajax({
url : 'ajax.php',
data : "id_page="+id_page,
type : 'post',
success : function(data){
// ICI LE CODE POUR REMPLIR TES INPUT
$('#input_desc').val(req.responseText);
$('#input_title').val(req.responseText);
$('#input_nom_page').val(req.responseText);
},
error : function(resultat){
alert(resultat);
}
});
}
</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='div_desc' style='display:inline'>
<input type="text" name="desc" id="input_desc" value="">
</div>
<label>title</label>
<div id='div_title' style='display:inline'>
<input type="text" name="title" id="input_title" value="">
</div>
<label>sujet</label>
<div id='div_subj' style='display:inline'>
<input type="text" name="subj" id="input_subj" value="">
</div>
</fieldset>
</form>
</body>
</html>
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"];
echo $row["title"];
echo $row["subj"];
}
}
?>
quand j'utilise firebug pour avoir le resultat consol.log j'ai comme quoi id_page est indefini :(
Ben oui...ta fonction go attend un paramètres. ..mais dans ton onchange..il n'y en a pas.
merci je l'ai remplacé par go(this.value) mais ça ne rempli que les 2 premiers champs et par la valeur du 1er (le contenu du 1er champs est dupliqué au 2eme et le 3eme champs est vide)
je sens que je suis tout pres de la solution lol
maintenant j'ai le code de sortie que je dois avoir pour les 3 input mais sur chaque champs texte (je ne sais pas si je suis assez clair ou non, j'ai des champs texte et dedans <input...> les 3 input que je dois avoir correctement remplis)
ajax.php
maintenant j'ai le code de sortie que je dois avoir pour les 3 input mais sur chaque champs texte (je ne sais pas si je suis assez clair ou non, j'ai des champs texte et dedans <input...> les 3 input que je dois avoir correctement remplis)
<html>
<head>
<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type='text/javascript'>
function go(id_page){
var req = $.ajax({
url : 'ajax.php',
data : "id_page="+id_page,
type : 'post',
success : function(data){
// ICI LE CODE POUR REMPLIR TES INPUT
$('#input_desc').val(req.responseText);
$('#input_title').val(req.responseText);
$('#input_subj').val(req.responseText);
},
error : function(resultat){
alert(resultat);
}
});
}
</script>
</head>
<body>
<form>
<fieldset style="width: 500px">
<legend>Liste liées</legend>
<label>Pages</label>
<select name='page' id='page' onchange='go(this.value)'>
<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='div_desc' style='display:inline'>
<input type="text" name="desc" id="input_desc" value="">
</div>
<label>title</label>
<div id='div_title' style='display:inline'>
<input type="text" name="title" id="input_title" value="">
</div>
<label>sujet</label>
<div id='div_subj' style='display:inline'>
<input type="text" name="subj" id="input_subj" value="">
</div>
</fieldset>
</form>
</body>
</html>
ajax.php
<?php
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)){
?>
<input type="text" name="desc" id="input_desc" value="<?php echo $row["desc"];?>">
<input type="text" name="title" id="input_title" value="<?php echo $row["title"];?>">
<input type="text" name="subj" id="input_subj" value="<?php echo $row["subj"];?>">
<?php }
?>
<?php }
?>
Bonjour,
Dans le dernier code que tu nous montres... tu y mets du HTML...
C'est dommage alors que ton code précédent était presque bon...
Il ne te restait plus qu'à y mettre du json..
et dans ton code JS :
</code>
Avant de poser une question, merci de lire la charte du site.
Cordialement, Jordane
Dans le dernier code que tu nous montres... tu y mets du HTML...
C'est dommage alors que ton code précédent était presque bon...
Il ne te restait plus qu'à y mettre du json..
<?php
include "dataconn.php";
if(isset($_POST["id_page"])){
$sql="SELECT * FROM pages WHERE id_page='".$_POST['id_page']."'";
$res = mysql_query($sql);
$arrResult = array();
while($row = mysql_fetch_array($res)){
$arrResult['desc'] =$row["desc"];
$arrResult['title'] = $row["title"];
arrResult['subj'] =$row["subj"];
}
}
return json_encode($arrResult);
?>
et dans ton code JS :
function go(id_page){
var req = $.ajax({
url : 'ajax.php',
data : "id_page="+id_page,
type : 'post',
success : function(data){
console.log(data);
// ICI LE CODE POUR REMPLIR TES INPUT
$('#input_desc').val(data.desc);
$('#input_title').val(data.title);
$('#input_nom_page').val(data.subj);
},
error : function(data){
alert('error'+data);
}
});
}
</code>
Avant de poser une question, merci de lire la charte du site.
Cordialement, Jordane
Que te donne la réponse ??
=> Que te donne le
=> Que te donne le
console.log(data);....
voila la reponse de la console : {"desc":"vjjbj","title":"gjjbj","subj":"jbjbj"}
pour les input je crois qu'ils sont correctement inscrit
et pour la requete
ne marche pas
ni avec
<label>desc</label> <div id='div_desc' style='display:inline'> <input type="text" name="desc" id="input_desc" value=""> </div> <label>title</label> <div id='div_title' style='display:inline'> <input type="text" name="title" id="input_title" value=""> </div> <label>sujet</label> <div id='div_subj' style='display:inline'> <input type="text" name="subj" id="input_subj" value=""> </div>
et pour la requete
return json_encode($arrResult[0]);
ne marche pas
ni avec
echo json_encode($arrResult[0]);
c'est bon je viens de régler le soucis merci bcp pour votre aide
il fallait utiliser l'ancienne fonction js
function go(id_page){
$.ajax({
url : 'ajax.php',
data : "id_page="+id_page,
type : 'post',
dataType : 'json',
success : function(data){
// ICI LE CODE POUR REMPLIR TES INPUT
$('#input_desc').val(data.desc);
$('#input_title').val(data.title);
$('#input_subj').val(data.subj);
},
error : function(resultat){
alert(resultat);
}
});
}
Humm.. Tu as tout mis ?
Je pense qu'il manque des infos comme : Object{.....}
1 - As tu bien, sur ta page HTML des Inputs portant comme ID ce qui est dans ton script jquery ?
2 - Tu peux aussi essayer, vue que tu ne retourne finalement qu'une seule Ligne dans ta requête de faire ça (dans ta page PHP)
Je pense qu'il manque des infos comme : Object{.....}
1 - As tu bien, sur ta page HTML des Inputs portant comme ID ce qui est dans ton script jquery ?
input_desc input_title input_nom_page
2 - Tu peux aussi essayer, vue que tu ne retourne finalement qu'une seule Ligne dans ta requête de faire ça (dans ta page PHP)
Echo json_encode($arrResult[0]);
Tu peux nous remettre le code js que tu as ?
Resolu ???
oui désolé j'avais répondu a ce message mais je ne sais pas pourquoi c'est affiché sur le message précédent
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.