IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

[AJAX] Ajax + remplir un input à partir du choix d'une liste déroulante


Sujet :

AJAX

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Étudiant
    Inscrit en
    Mai 2007
    Messages
    37
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2007
    Messages : 37
    Par défaut [AJAX] Ajax + remplir un input à partir du choix d'une liste déroulante
    Bonjour tout le monde ^^

    J'ai un petit problème !
    Je dispose d'une liste déroulante avec plusieurs choix
    Selon le choix sélectionné par l'utilisateur j'aimerais afficher du texte dans un input

    j'ai donc un fichier
    essai.php
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
     
    <html>
    <head>
    <script type="text/javascript" src="js/ajaxFiche.js"></script>
    </head>
    <body>
    <form>
    	<fieldset>
     
    		<legend> Modifier une fiche animal </legend>
     
    		<label>Animal &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
    		<div id='nom'>
    			<select name='nom' id='nom' onchange='fiche()'>
    				<option value='Neige'> Neige</option>
    				<option value='iris'> Iris </option>
    			</select>
    		</div>
    		<br />
    		<br />
     
    		<div id='idNomAnimal'>
    			<label> Nom de l animal &nbsp;&nbsp;</label>
    			<input id="idNomAnimal" name="idNomAnimal" type="text" value="" />
    			<br />	
    		</div>
    	</fieldset>
    </form>
    </body>
    </html>
    ensuite un fichier ajaxFiche.js
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
     
     
     
    	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;
    	}
     
    	function fiche()
    	{
    		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 des noms des animaux
    				document.getElementById('idNomAnimal').innerHTML = leselect;
    			}
    		}
     
    		// Ici on va voir comment faire du post
    		xhr.open("POST","ajaxFiche.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, le nom de la catégorie sélectionnée
    		sel = document.getElementById('nom');
    		categorie = sel.options[sel.selectedIndex].value;
    		xhr.send("nom="+nom);
    	}
    et un fichier ajaxFiche.php
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    <?php
    	$nomAnimal = $_POST["nom"];
    	echo "ok nom";
    	echo $nomAnimal;
     
    	echo "<select name='fiche'>";
     
    	$connect= mysql_connect("localhost", "root","") or die ("Impossible de se connecter: ".mysql_error());
    	mysql_select_db("test") or die("Base de données inaccessible : ".mysql_error($connect));
     
     
    ?>
    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 idée , une suggestion !

    Merci d'avance

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Salut,
    Probablement parce que tu n'envoies pas la bonne valeur :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    categorie = sel.options[sel.selectedIndex].value;
    xhr.send("nom="+nom);
    ce ne serait pas plutôt :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    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 idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par défaut
    Bonjour,
    Attention, tu as deux fois l'id idNomAnimal, un id doit être unique.
    Selon le choix sélectionné par l'utilisateur j'aimerais afficher du texte dans un input
    Pourquoi tu mets une balise select dans le retour:
    echo "<select name='fiche'>";

  4. #4
    Membre averti
    Profil pro
    Étudiant
    Inscrit en
    Mai 2007
    Messages
    37
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2007
    Messages : 37
    Par défaut
    @Bovino : exact dans le code que j'ai mis :p ya une petite erreur de copier coller =)

    @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 déroulantes liées
    donc l'utilisateur sélectionne une catégorie présentes dans la première liste
    à partir de là, la deuxième se met à jour grâce à ajax (j'y rajoute des options)

    et ensuite l'utilisateur sélectionne un nom à partir de la deuxième liste et là j'aimerais donc afficher des informations présentes en bdd, les mettre dans des input et autre ^^

    pourtant je fais exactement la même chose .. je ne comprends pas pourquoi cela ne fonctionne pas

    trop d'ajax tue l'ajax ? :p

  5. #5
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par défaut
    Pour les 2 listes liées, utilises un retour XML pour charger ton second liste, utiliser innerHTML pour changer ou créer un élément pose souvent des problèmes.
    http://www.developpez.net/forums/d77...te-liees-ajax/
    Pour remplir les input, tu fais de même façon mais au lieu de remplir une liste,
    tu mets le contenu de l' XML dans les input avec le onchange de la seconde liste.

  6. #6
    Membre averti
    Profil pro
    Étudiant
    Inscrit en
    Mai 2007
    Messages
    37
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2007
    Messages : 37
    Par défaut
    oki merci pour la rapidité de ta réponse
    je vais tester ça de suite !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AC-2007] Remplir un champ à partir des informations d'une liste déroulant
    Par titsoun83 dans le forum IHM
    Réponses: 12
    Dernier message: 31/03/2015, 15h26
  2. Réponses: 3
    Dernier message: 16/03/2011, 16h47
  3. Réponses: 2
    Dernier message: 13/08/2010, 10h32
  4. Réponses: 2
    Dernier message: 14/06/2010, 08h07
  5. Réponses: 4
    Dernier message: 15/12/2006, 21h43

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo