Vous êtes sur la page 1sur 15

Ajax + remplir un input partir du choix d'une liste droulante

1 sur 15

http://www.developpez.net/forums/d789020/webmasters-developpeme...

Forums Tutoriels Magazine FAQs Blogs Chat Newsletter


tudes Emploi Club Contacts

Vos recrutements informatiques


700 000 dveloppeurs, chefs de projets, ingnieurs, informaticiens...
Contactez notre quipe spcialiste en recrutement

Accueil

ALM

Applications

Java
Mobiles
PHP

.NET

Dv. Web

Systmes
Ruby

ACCUEIL AJAX

EDI

Dv. Web

TypeScript

FORUM AJAX

Programmation
AJAX

Apache

Web smantique
FAQ AJAX

SGBD
ASP

Office

CSS

Webmarketing

TUTORIELS AJAX

Dart

Solutions d'entreprise
Flash / Flex

JavaScript

(X)HTML

LIVRES AJAX

Aide
S'inscrire
La Securit intrieure (DGSI) recrute un ingnieur
Se souvenir de moi
?
d'tude
en applications web h/f
DGSI - Ile de France - Levallois-Perret
CDD CDI
(92300)

Index du forum
Ingnieur Dveloppeur scientifique web H/F
SOGETI High Tech - Ile de France - ISSY-LESMOULINEAUX (92136)

Webmasters - Dveloppement Web


JavaScript, AJAX, TypeScript & Dart

CDI

AJAX
Ajax + remplir un input partir du choix
d'une liste droulante

Page 1 sur 2 1 2

Charg de recette pour leader e-commerce top 10


du web franais
Mobiskill - Ile de France - Paris (75000)
CDI

Dernire

Discussion: Ajax + remplir un input partir du choix d'une liste droulante


Outils de la discussion

#1

04/08/2009, 19h30

sofuzion
Invit rgulier

Ajax + remplir un input partir du choix d'une liste


droulante
Bonjour tout le monde ^^

tudiant
Inscrit en:

mai 2007

Messages:

37

Points:

J'ai un petit problme !


Je dispose d'une liste droulante avec plusieurs choix
Selon le choix slectionn par l'utilisateur j'aimerais afficher du
texte dans un input
j'ai donc un fichier
essai.php

28/10/2015 22:20

Ajax + remplir un input partir du choix d'une liste droulante

2 sur 15

Code
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14

http://www.developpez.net/forums/d789020/webmasters-developpeme...

Slectionner tout - Visualiser dans une fentre


part

<html>
<head>
<script type="text/javascript" src="js/ajaxFiche.js"
</head>
<body>
<form>
<fieldset>
<legend> Modifier une fiche animal
<label>Animal &nbsp;&nbsp;&nbsp
<div id='nom'>
<select name='nom' id=

ensuite un fichier ajaxFiche.js


Code
:

Slectionner tout - Visualiser dans une fentre


part

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function getXhr()
{
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject)
{ // Internet Explorer
try {
} catch (e)
{

et un fichier ajaxFiche.php
Code
:
1
2
3
4
5
6
7
8
9
10
11
12
13

Slectionner tout - Visualiser dans une fentre


part

<?php
$nomAnimal = $_POST["nom"];
echo "ok nom";
echo $nomAnimal;
echo "<select name='fiche'>";

$connect= mysql_connect("localhost", "root"


mysql_select_db("test") or die("Base de donnes inacce

?>

Je suis un peu perdue -_Je ne comprends pas pourquoi mon echo dans le fichier
"ajaxFiche.php" ne se fait pas ..
J'ai du faire une erreur mais je ne trouve pas :/
Si quelqu'un une ide , une suggestion !
Merci d'avance

28/10/2015 22:20

Ajax + remplir un input partir du choix d'une liste droulante

3 sur 15

http://www.developpez.net/forums/d789020/webmasters-developpeme...

Rpondre avec citation

#2

04/08/2009, 20h14

Bovino
Rdacteur

Salut,
Probablement parce que tu n'envoies pas la bonne valeur :
Code
:
1
2

Dveloppeur Web
Inscrit en: juin 2008
Messages:

23 781

Points:

91 286

Billets dans le blog: 20

Slectionner tout - Visualiser dans une fentre


part
categorie = sel.options[sel.selectedIndex].value;
xhr.send("nom="+nom);

ce ne serait pas plutt :


Code
:
1
2

Slectionner tout - Visualiser dans une fentre


part
categorie = sel.options[sel.selectedIndex].value
xhr.send("nom="+categorie);

Pas de question technique par MP !


Tout le monde peut participer developpez.com, vous avez
une ide, contactez-moi !
Mes formations video2brain : La formation complte sur
JavaScript JavaScript et le DOM par la pratique PHP 5 et
MySQL : les fondamentaux
Mon livre sur jQuery
Module Firefox / Chrome d'intgration de JSFiddle et
CodePen sur le forum
Rpondre avec citation

#3

05/08/2009, 08h21

andry.aime
Rdacteur/Modrateur

Bonjour,
Attention, tu as deux fois l'id idNomAnimal, un id doit tre
unique.

Selon le choix slectionn par l'utilisateur j'aimerais afficher


du texte dans un input
Pourquoi tu mets une balise select dans le retour:

echo "<select name='fiche'>";


Inscrit en:
2007

septembre

Messages:

7 126

28/10/2015 22:20

Ajax + remplir un input partir du choix d'une liste droulante

4 sur 15

Points:

http://www.developpez.net/forums/d789020/webmasters-developpeme...

12 098

Rpondre avec citation

#4

06/08/2009, 14h01

sofuzion
Invit rgulier

@Bovino : exact dans le code que j'ai mis :p ya une petite


erreur de copier coller =)

tudiant
Inscrit en:

mai 2007

Messages:

37

Points:

@andry.aime : bien vu pour l'id j'ai chang


et le select c'est parce que je n'ai pas mis tout le reste du code
assez long !
j'aurais pas du le mettre
sinon je voulais savoir
en fait, j'ai deux listes droulantes lies
donc l'utilisateur slectionne une catgorie prsentes dans la
premire liste
partir de l, la deuxime se met jour grce ajax (j'y
rajoute des options)
et ensuite l'utilisateur slectionne un nom partir de la
deuxime liste et l j'aimerais donc afficher des informations
prsentes en bdd, les mettre dans des input et autre ^^
pourtant je fais exactement la mme chose .. je ne comprends
pas pourquoi cela ne fonctionne pas
trop d'ajax tue l'ajax ? :p

Rpondre avec citation

#5

06/08/2009, 15h01

andry.aime
Rdacteur/Modrateur

Pour les 2 listes lies, utilises un retour XML pour charger ton
second liste, utiliser innerHTML pour changer ou crer un
lment pose souvent des problmes.
http://www.developpez.net/forums/d77...te-liees-ajax/
Pour remplir les input, tu fais de mme faon mais au lieu de
remplir une liste,
tu mets le contenu de l' XML dans les input avec le onchange de
la seconde liste.

Inscrit en:
2007

septembre

Messages:

7 126

Points:

12 098

Rpondre avec citation

#6

06/08/2009, 15h03

sofuzion
Invit rgulier

oki merci pour la rapidit de ta rponse

28/10/2015 22:20

Ajax + remplir un input partir du choix d'une liste droulante

5 sur 15

http://www.developpez.net/forums/d789020/webmasters-developpeme...

je vais tester a de suite !

tudiant
Inscrit en:

mai 2007

Messages:

37

Points:

Rpondre avec citation

#7

06/08/2009, 16h38

sofuzion
Invit rgulier

tudiant
Inscrit en:

mai 2007

Messages:
Points:

37
9

oki mes deux premires listes c'est ok


j'ai remplie la premire la main, ensuite la deuxime
s'actualise selon le choix dans la premire
sinon au niveau de change2() :
Code
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Slectionner tout - Visualiser dans une fentre


part

function change2()
{

var xhr = getXhr


// On dfini ce qu'on va faire
xhr.onreadystatechange
{
var rst
var items
document.
for(var
{

je ne sais pas trop comment faire pour mettre un input la


place de la liste

Rpondre avec citation

#8

07/08/2009, 08h41

andry.aime
Rdacteur/Modrateur

Bonjour,
Par exemple si ton php retourne:
Code XML
:
1
2
3
4
5
6
Inscrit en:
2007

septembre

Messages:

7 126

Points:

Slectionner tout - Visualiser dans une fentre


part

<?xml version="1.0" encoding="ISO-8859-1"?>


<racine>
<titre>Livre1</titre>
<isbn>12312321</isbn>
<publication>12/10/2008</publication>
</racine>

Code HTML Slectionner tout - Visualiser dans une fentre

28/10/2015 22:20

Ajax + remplir un input partir du choix d'une liste droulante

6 sur 15

12 098

http://www.developpez.net/forums/d789020/webmasters-developpeme...

part
Titre :<input type="text" id="titre" />
Isbn :<input type="text" id="isbn" />
Date de publication<input type="text" id="pub"

1
2
3

Code
:

Slectionner tout - Visualiser dans une fentre


part

document.getElementById('titre').value=rst.getElementsByTagName
document.getElementById('isbn').value=rst.getElementsByTagName
document.getElementById('pub').value=rst.getElementsByTagName

1
2
3

Rpondre avec citation

#9

07/08/2009, 20h06

sofuzion
Invit rgulier

Merci de l'aide
tudiant
Inscrit en:

mai 2007

Messages:

37

Points:

J'ai essay mais a ne fonctionne toujours pas ..


On dirait que change2() ne fonctionne pas .. rien n'est
dclench
mon code :
essai.php
Code
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Slectionner tout - Visualiser dans une fentre


part

<html>
<head>
<script type='text/javascript'
function getXhr(){
var xhr = null
if(window.XMLHttpRequest
xhr = new XMLHttpRequest
else if(window.
try {
xhr =
} catch (
xhr =
}

ajaxListe.php
Code
:
1
2
3
4
5
6
7
8

Slectionner tout - Visualiser dans une fentre


part

<?php
echo "ok";
header("Content-type:text/xml");
echo '<?xml version="1.0" encoding="ISO-8859-1"?>'
echo "<racine>";
if(isset($_POST["Nom"]))
{

28/10/2015 22:20

Ajax + remplir un input partir du choix d'une liste droulante

7 sur 15

http://www.developpez.net/forums/d789020/webmasters-developpeme...

9
10
11
12
13

$connect= mysql_connect("localhost"
mysql_select_db("bdd_arche") or die
$res = mysql_query("SELECT * FROM fiche WHERE
while($row = mysql_fetch_assoc
{

ajaxFiche.php
Code
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Slectionner tout - Visualiser dans une fentre


part

<?php

header("Content-type:text/xml");
echo '<?xml version="1.0" encoding="ISO-8859-1"?>'
echo "<elements>";
if(isset($_POST["Categorie"]))
{
$connect= mysql_connect("localhost"
mysql_select_db("bdd_arche") or die
$res = mysql_query("SELECT nom FROM fiche WHER
while($row = mysql_fetch_assoc
{
echo '<element>';
echo "<option>".$row["nom"]."</option>"

La deuxime liste se met bien jour suivant ce que l'on


slectionne dans la premire liste !
En revanche, lorsque l'on choisit une des options de la seconde
liste ..
rien ne s'affiche dans le input
on dirait que onchange='change2()' n'est mme pas appel ..
Merci pour votre aide !

Rpondre avec citation

07/08/2009, 21h49

#10

Bovino
Rdacteur

Dveloppeur Web
Inscrit en: juin 2008
Messages:

23 781

Points:

91 286

Billets dans le blog: 20

28/10/2015 22:20

Ajax + remplir un input partir du choix d'une liste droulante

8 sur 15

http://www.developpez.net/forums/d789020/webmasters-developpeme...

on dirait que onchange='change2()' n'est mme pas appel


..
Ca je te le confirme
onchange est un attribut JavaScript qui contient du code
JavaScript, celui-ci n'est donc pas valu lors d'une insertion
dans le DOM, il faut affecter ces vnements par script aprs
l'insertion, du style :
Code
:
1
2
3
4
5
6
7
8
9
10

Slectionner tout - Visualiser dans une fentre


part
xhr.onreadystatechange = function(){
var rst = xhr.responseXML;
var items=rst.getElementsByTagName('element'
document.getElementById('nom').options
for(var i=0;i<items.length;i++){
var myOption = new Option(items
document.getElementById('nom')
}
document.getElementById('nom').onchange
}

Pas de question technique par MP !


Tout le monde peut participer developpez.com, vous avez
une ide, contactez-moi !
Mes formations video2brain : La formation complte sur
JavaScript JavaScript et le DOM par la pratique PHP 5 et
MySQL : les fondamentaux
Mon livre sur jQuery
Module Firefox / Chrome d'intgration de JSFiddle et
CodePen sur le forum
Rpondre avec citation

#11

08/08/2009, 09h33

andry.aime
Rdacteur/Modrateur

Si tu veux remplir qu'un seul input, tu n'as pas besoin d'utiliser


XML
Code PHP Slectionner tout - Visualiser dans une fentre
:
part

Inscrit en:
2007

septembre

Messages:

7 126

Points:

12 098

1
2
3
4
5
6
7
8
9
10

if(isset($_POST["Nom"]))
{
$connect= mysql_connect("localhost"
mysql_select_db("bdd_arche") or die
$res = mysql_query("SELECT * FROM fiche WHERE
while($row = mysql_fetch_assoc
{
echo ".$row["nom"].";
}
}

28/10/2015 22:20

Ajax + remplir un input partir du choix d'une liste droulante

9 sur 15

11

Code
:
1
2

http://www.developpez.net/forums/d789020/webmasters-developpeme...

mysql_close ($connexion); // Fermeture de la connexion

Slectionner tout - Visualiser dans une fentre


part
var rst = xhr.responseText;
document.getElementById('inputNom').value=rst;

Rpondre avec citation

#12

08/08/2009, 15h37

sofuzion
Invit rgulier

tudiant
Inscrit en:

mai 2007

Messages:

37

Points:

@andry.aime : je vais garder le xml j'ai plusieurs input


c'est
juste que l j'en test un seul pour voir dj que a fonctionne
^^
@bovino : j'ai rajout la ligne
Code
:
1
2

Slectionner tout - Visualiser dans une fentre


part

document.getElementById('nom').onchange = function

mais a ne change rien ...


on dirait toujours qu'on ne rentre pas dans change2()

Rpondre avec citation

#13

08/08/2009, 15h44

Bovino
Rdacteur

Arf... oui, c'est tellement gros que je ne l'avais mme pas vu !


Code
:

Dveloppeur Web
Inscrit en: juin 2008
Messages:

23 781

Points:

91 286

Billets dans le blog: 20

1
2
3
4
5
6
7
8
9
10

Slectionner tout - Visualiser dans une fentre


part
xhr.onreadystatechange = function(){
var rst = xhr.responseXML;
var items=rst.getElementsByTagName('element'
document.getElementById('nom').options
for(var i=0;i<items.length;i++){
var myOption = new Option(items
document.getElementById('nom')
}
document.getElementById('nom').onchange
}

Il faut peut-tre tester que le readyState soit 4, sinon, tu


lances la fonction avant d'avoir reu la rponse et forcment, a
marche moins bien.
Code
:

Slectionner tout - Visualiser dans une fentre


part

28/10/2015 22:20

Ajax + remplir un input partir du choix d'une liste droulante

10 sur 15

1
2
3
4
5
6
7
8
9
10
11
12

http://www.developpez.net/forums/d789020/webmasters-developpeme...

xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200
var rst = xhr.responseXML;
var items=rst.getElementsByTagName('element'
document.getElementById('nom').options
for(var i=0;i<items.length;i++){
var myOption = new Option(items
document.getElementById('nom')
}
document.getElementById('nom').onchange
}
}

Pas de question technique par MP !


Tout le monde peut participer developpez.com, vous avez
une ide, contactez-moi !
Mes formations video2brain : La formation complte sur
JavaScript JavaScript et le DOM par la pratique PHP 5 et
MySQL : les fondamentaux
Mon livre sur jQuery
Module Firefox / Chrome d'intgration de JSFiddle et
CodePen sur le forum
Rpondre avec citation

#14

11/08/2009, 13h42

sofuzion
Invit rgulier

tudiant
Inscrit en:

mai 2007

Messages:

37

Points:

c'est pas faux ^^


je l'ai rajout
mais a ne fonctionne toujours pas ...
arf .. me demande ce qui ne va pas

Rpondre avec citation

#15

11/08/2009, 14h35

andry.aime
Rdacteur/Modrateur

On peut voir ton code HTML, JS et PHP concerns pour voir?

Inscrit en:
2007

septembre

Messages:

7 126

Points:

12 098

28/10/2015 22:20

Ajax + remplir un input partir du choix d'une liste droulante

11 sur 15

http://www.developpez.net/forums/d789020/webmasters-developpeme...

Rpondre avec citation

11/08/2009, 15h04

#16

sofuzion
Invit rgulier

tudiant
Inscrit en:

mai 2007

Messages:

37

Points:

28/10/2015 22:20

Ajax + remplir un input partir du choix d'une liste droulante

12 sur 15

http://www.developpez.net/forums/d789020/webmasters-developpeme...

Oui bien sr :
voici mon code de ma page essai.php
Code
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Slectionner tout - Visualiser dans une fentre


part

<html>
<head>
<script type='text/javascript'
function getXhr(){
var xhr = null
if(window.XMLHttpRequest
xhr = new XMLHttpRequest
else if(window.
try {
xhr =
} catch (
xhr =
}

le code de ma page ajaxListe.php


Code
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Slectionner tout - Visualiser dans une fentre


part

<?php

header("Content-type:text/xml");
echo '<?xml version="1.0" encoding="ISO-8859-1"?>'
echo "<elements>";
if(isset($_POST["Categorie"]))
{
$connect= mysql_connect("localhost"
mysql_select_db("bdd_arche") or die
$res = mysql_query("SELECT nom FROM fiche WHER
while($row = mysql_fetch_assoc
{
echo '<element>';
echo "<option>" .$row[

et le code de ma page ajaxFiche.php


Code
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Slectionner tout - Visualiser dans une fentre


part

<?php
header("Content-type:text/xml");
echo '<?xml version="1.0" encoding="ISO-8859-1"?>'
echo "<racine>";
if(isset($_POST["nom"]))
{
$connect= mysql_connect("localhost"
mysql_select_db("bdd_arche") or die
$res = mysql_query("SELECT * FROM fiche WHERE
while($row = mysql_fetch_assoc
{
echo '<inputNom>';
echo ".$row["nom"].";

Merci pour votre aide

Rpondre avec citation

28/10/2015 22:20

Ajax + remplir un input partir du choix d'une liste droulante

13 sur 15

http://www.developpez.net/forums/d789020/webmasters-developpeme...

12/08/2009, 07h36

andry.aime
Rdacteur/Modrateur

Re,
Attention la casse.

xhr.send("Nom="+nom);
.......
isset($_POST["nom"])
.......
WHERE Nom='".$_POST["nom"]."'

Inscrit en:
2007

septembre

Messages:

7 126

Points:

12 098

C'est valable aussi pour les noms des tables de la base. Sous
windows la casse n'est pas respect pour la base de donnes
mais sous linux oui. Tu pourras avoir des problmes lors de
l'hbergement de ton site.

Rpondre avec citation

#18

24/08/2009, 08h34

jfox
Membre rgulier

Inscrit en:

mars 2003

Messages:

144

Points:

81

En ce qui concerne l'ordre des items, je pense avoir compris le


problme (j'ai eu le mme!).
Aprs l'excution de la fonction change(), les items de la 2nde
liste droulante sont tris en dcroissant et celui qui est propos
par dfaut est le dernier. Ex: 3 items dans la liste (item1, item2,
item3) et c'est item3 qui est affich alors que cela devrait tre
item1.
Pour contourner cela, il faut ajouter dans la fonction change(),
juste avant l'appel de la fonction change2() la ligne suivante:
Code
:
1
2

Slectionner tout - Visualiser dans une fentre


part

document.getElementById('nom').selectedIndex =

Rpondre avec citation

25/08/2009, 13h32

#19

sofuzion
Invit rgulier

tudiant
Inscrit en:

mai 2007

Messages:

37

Points:

28/10/2015 22:20

Ajax + remplir un input partir du choix d'une liste droulante

14 sur 15

http://www.developpez.net/forums/d789020/webmasters-developpeme...

Bonjour !
Merci pour votre aide
@andry.aime : merci pour l'info c'est vrai que je n'avais pas fais
attention !!
@jfox : l'ordre des items est correct avec a
merci
Mais sinon j'ai toujours mon problme :/
on dirait que ma fonction change2() n'est jamais appel ..
elle ne se dclenche jamais ...

Rpondre avec citation

#20

25/08/2009, 13h46

andry.aime
Rdacteur/Modrateur

Re,
Attention, tu as une erreur sur ton php:

echo '</element'>;
Code
:

Slectionner tout - Visualiser dans une fentre


part

echo '</element>';

Inscrit en:
2007
Messages:

septembre

Points:

12 098

7 126

Installe Firebug et dcrit l'erreur retourner

Rpondre avec citation

Page 1 sur 2 1 2
Cette discussion est rsolue.

Index du forum

Dernire

Webmasters - Dveloppement Web

JavaScript, AJAX, TypeScript & Dart

AJAX

Ajax + remplir un input partir du choix d'une liste droulante


O FFRE S D' E MPLO I IT

Ingnieur javascript fullstack (h/f)


Urban Linker - Ile de France - Paris
Musicien JavaScript Confirm - Startup Musicale Londres - UK
Mobiskill - Royaume-Uni - Londres
Dveloppeur Javascript (H/F)
CTS - Bretagne - Grand Ouest
Voir plus d'offres

CDI
CDI
CDI

Voir la carte des offres IT

Discussion prcdente | Discussion suivante

28/10/2015 22:20

Ajax + remplir un input partir du choix d'une liste droulante

15 sur 15

http://www.developpez.net/forums/d789020/webmasters-developpeme...

Responsable bnvole de la rubrique AJAX : Xavier Lecomte - Contacter par email


Nous contacter

Participez

Hbergement

Informations lgales

Partenaire : Hbergement Web

Copyright 2000-2015 - www.developpez.com

28/10/2015 22:20