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] remplir un formulaire après avoir choisit un élément dans la liste déroulante


Sujet :

AJAX

  1. #1
    Invité
    Invité(e)
    Par défaut [AJAX] remplir un formulaire après avoir choisit un élément dans la liste déroulante
    Bonjour,
    J'ai une liste déroulante alimentée par une requête SQL, et à côté, les champs d'un formulaire
    J'aimerais, dès que je sélectionne un nom dans la liste, que les champs se remplissent avec les données correspondantes
    Voici mon code
    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
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    <?include ("connection.php");?>
    <link rel="StyleSheet" type="text/css" href="http://wsb.torop.net/css/style.css">
    <style type="text/css">
    A:VISITED,A:LINK,A:ACTIVE {
    	font-family:arial;
    	text-decoration:none;
    	color:#FF3300;
    }
    A:HOVER {
    	font-family:arial;
    	text-decoration:underline;
    	color:#FF3300;
    }
    </style>
     
    <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('livre').innerHTML = leselect;
    					}
    				}
     
    				// Ici on va voir comment faire du post
    				xhr.open("POST","ajaxArticles.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('article');
    				idauteur = sel.options[sel.selectedIndex].value;
    				xhr.send("idArticle="+idarticle);
    			}
    </script>
     
    <form method='POST' action='liste3.php' class='txtBlanc'>
    	<div align='center'>
    		<input type='hidden' name='noArticle' value=''>
    	</div>
    	<br>
     
    	<div width='100%'>
    		<div style='text-align:right;float:left;width:45%;height:30px;margin:3px;'>
    			Date :  
    		</div>
     
    		<div style='text-align:left;float:left;width:45%;height:30px;margin:3px;'>
    			<input type='texte' name='date' style='width:65px' value='<?=$date=date(d.m.y);?>'>
    		</div>
    	</div>
     
    	<div width='100%'>
     
    <?php
    connectMaBase();
    ?>
    		<div style='text-align:right;float:left;width:45%;height:30px;margin:3px;'>
    			Article :  
    		</div>
    		<div style='text-align:left;float:left;width:45%;height:30px;margin:3px;'>
    			<select name='idArticle' id='' onchange='go()'  style='width:300px'><option value=''>Choisir un article</option>
    				<?
    				$resultat=mysql_query("select nomArticle from article order by noArticle") or die ("requète non executé");
    				if (! $resultat) { echo "Erreur requete"; exit;} 
    				while ($ligne=mysql_fetch_array($resultat))
    				{
    				?>
    				<option><?= ''.$ligne['nomArticle'].'';?> </option>
    				<?php
                                    }
                                    
                                    if($liste1 != -1){ //si on a fait un choix
                                            //on refait une requette avec une condition
                                            $sql = "SELECT nomArticle, intituléArticle, descArticle, prixArticle FROM article WHERE idArticle='".$idArticle."'";
                                            $requete = mysql_query($sql);
     
                                    echo $nomArticle; echo "<br>"
                                    echo $intituleArticle; echo "<br>";
                                    echo $descArticle; echo "<br>";
                                    }
            mysql_close();
            ?>
    			</select>
    		</div>
    	</div>
     
    	<div id='identClient'>        
    		<div width='100%'>
    		<div style='text-align:right;float:left;width:45%;height:30px;margin:3px;'>
    			Nom de l'article : 
    		</div>
    		<div style='text-align:left;float:left;width:45%;height:30px;margin:3px;'>
    			<input type='text' name='nomArticle' value='<?=$ligne['nomArticle'];?>'  style='width:300px'>
    		</div>
    	</div>
     
    	<div width='100%'>
    		<div style='text-align:right;float:left;width:45%;height:30px;margin:3px;'>
    			Intitulé : 
    		</div>
    		<div style='text-align:left;float:left;width:45%;height:30px;margin:3px;'>
    			<input type='text' name='intituleArticle' value='<?=$donnees['intituléArticle'];?>'  style='width:300px'>
    		</div>
    	</div>
     
    	<div width='100%'>
    		<div style='text-align:right;float:left;width:45%;height:30px;margin:3px;'>
    			Description : 
    		</div>
    		<div style='text-align:left;float:left;width:45%;height:30px;margin:3px;'>
    			<TEXTAREA name='description' rows=4 style='width:300px'></TEXTAREA>
    		</div>
    	</div>
     
    	<div width='100%'>
    		<div style='text-align:right;float:left;width:45%;height:30px;margin:3px;'>
    			Montant : 
    		</div>
    		<div style='text-align:left;float:left;width:45%;height:30px;margin:3px;'>
    			<input type='text' name='prix' id='' value='' onChange='totalFacture()'  style='width:40px;text-align:right;'> &euro;
    		</div>
    		<input type="submit" name="enregistrer" value="Enregistrer">
    	</div>
     
    </form>
    Merçi d'avance pour votre aide

  2. #2
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Points : 36 571
    Points
    36 571
    Par défaut
    Bonjour et bienvenue sur Developpez.com

    Visiblement ta question ne concerne pas Ajax (sauf si j'ai loupé quelque chose) : Ajax te sert à alimenter la liste, mais le fait de mettre à jour des champs en fonction d'un choix dans cette liste se ferait de la même manière avec un select codé "en dur", non ?

    Bref, il faudrait plus de précisions :
    • poste je code généré du select
    • quelles infos sont présentes dans le select ?
    • quels champs mettre à jour et avec lesquelles de ces infos ?

    Une fois qu'on saura ça, la mécanique est simple .... a priori

    A+
    Pour tout savoir sur l'utilisation du forum

    En postant votre message, n'oubliez pas les Règles du Club.

Discussions similaires

  1. Réponses: 2
    Dernier message: 06/02/2017, 12h20
  2. Réponses: 1
    Dernier message: 04/08/2014, 12h16
  3. Rafraichir un formulaire en fonction d'un choix dans une liste déroulante
    Par talondachil dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 29/01/2008, 23h17
  4. Réponses: 8
    Dernier message: 27/04/2007, 14h07
  5. Réponses: 1
    Dernier message: 15/06/2006, 18h01

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