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 input à partir du choix d'une liste déroulante php mysql ajax


Sujet :

AJAX

  1. #1
    Membre à l'essai
    Inscrit en
    Août 2010
    Messages
    9
    Détails du profil
    Informations forums :
    Inscription : Août 2010
    Messages : 9
    Points : 11
    Points
    11
    Par défaut [AJAX] remplir un input à partir du choix d'une liste déroulante php mysql ajax
    Bonjour,

    Je veux remplir un input à partir du choix d'une liste déroulante en utilisant php mysql ajax

    mon script ne fonctionne pas pour quoi?

    je m'excuse mais je suis nouveau sur la ajax et php

    index.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
    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
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    <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 regions(){ 
    				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('chambr').innerHTML = leselect; typeadult(); 
    					} 
    				} 
     
    				// Ici on va voir comment faire du post 
    				xhr.open("POST","liste-regions.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 la destination0. 
     
    				var sel = document.getElementById('destination'); 
    				var id_destination = sel.options[sel.selectedIndex].value; 
    				xhr.send("id_destination="+id_destination); 
     
    			} 
     
    			function typesejour(){ 
    				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('typecharg').innerHTML = leselect; 
    					} 
    				} 
     
    				// Ici on va voir comment faire du post 
    				xhr.open("POST","liste-sejours.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 la region 
     
    				var sel = document.getElementById('id_chambre'); 
    				var id_chambre = sel.options[sel.selectedIndex].value; 
    				xhr.send("id_chambre="+id_chambre); 
     
    			} 
     
    			function fiches1(){ 
    				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('prix').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, l'id de la destination0. 
     
     
    				var sel = document.getElementById('id_chambre'); 
    				var id_chambre = sel.options[sel.selectedIndex].value; 
    				xhr.send("id_chambre="+id_chambre); 
     
    			}	 
     
     
    			function typeadult(){ 
    				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('adulte').innerHTML = leselect; 
    					} 
    				} 
     
    				// Ici on va voir comment faire du post 
    				xhr.open("POST","liste-adulte.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 la region 
     
    				var sel = document.getElementById('id_chambre'); 
    				var id_chambre = sel.options[sel.selectedIndex].value; 
    				xhr.send("id_chambre="+id_chambre); 
     
    			} 
     
     
    		</script>	 
     
     
    <form> 
                                      <label>destination..........</label> 
    <select name="destination"  id='destination' onchange='regions()'> 
                          <option value="-1">Toutes les destinations</option>                      
    									<?php 
    						mysql_connect("localhost","root",""); 
    						mysql_select_db("dddddd"); 
    						$res = mysql_query("SELECT id_destination,nom_destination FROM hotel ORDER BY nom_destination"); 
    						while($row = mysql_fetch_assoc($res)){ 
    							echo "<option value='".$row["id_destination"]."'>".$row["nom_destination"]."</option>"; 
    						} 
    					?> 
     
                        </select> 
                        <label></label>                    
    <div id='chambr'> 
     
                        <label>chambre..........................................................</label> 
    <select name="chambre" id="id_chambre" onchange='typesejour()'> 
                            <option value="-1">Toutes les chambres</option> 
                        </select> 
                        </div> 
     
     
                        				<div id='typecharg'> 
                        				  <label>charg......................................................................................................</label> 
     
                        <select name="char" id="id_char" onchange='typeadult()'> 
                          <option value="-1">Tous les types de typecharg</option>                        
                        </select> 
                        </div>      
     
     
    				<label>..........................................................................................prix</label> 
      <div id='fiches' style='display:inline' > 
    				<input id='inputprix' name='prixe' type='text' /> 
                    <label>charg</label> 
                    <input id='inputNomchar' name='prixe' type='text' /> 
      </div>   
    <div id='adulte'>                <label>adulte</label> 
     
                        <select name="adult" id="id_adult"> 
                          <option value="-1">adutl</option>                        
                        </select> 
                        </div>    
     
     
    </form>

    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
    14
    15
    16
    17
    18
    <?php
    	header("Content-type:text/xml");
    	echo '<?xml version="1.0" encoding="ISO-8859-1"?>';
        echo "<racine>";
    	if(isset($_POST["prix"]))
    	{
    		$connect= mysql_connect("localhost", "root","") or die ("Impossible de se connecter: ".mysql_error());
    		mysql_select_db("bdd_arche") or die("Base de données inaccessible : ".mysql_error($connect));
    		$res = mysql_query("SELECT id_chambre , prix_chambre, nom_char FROM chambres WHERE `id_chambre`='$id_chambre'";
    		while($row = mysql_fetch_assoc($res))
     
    		      echo '<inputNomchar>'.$row["nom_char"].'</inputchar>';
    			  echo '<inputprix>'.$row["prix_chambre"].'</inputprix>';
    		}
    	}
    	echo "</racine>";
     
    ?>
    liste-sejours.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
    <?php
            include('/connexion.php');
     
            echo "<select name='char' id='id_char' onchange='typeadult()'>";
            
            if(isset($_POST["id_chambre"])){
                $id_chambre=$_POST["id_chambre"];   
                $mdr_chambre2="SELECT `id_chambre`,`id_char`,`nom_char` FROM `typecharg` WHERE `id_chambre`='$id_chambre'";
                    $res_mdr_chambre2=mysql_query($mdr_chambre2);
                    while($row = mysql_fetch_assoc($res_mdr_chambre2)){
                            echo "<option value='".$row["id_char"]."'>".$row["nom_char"]."</option>";
                    }
            }       
            echo "</select>";
            
    ?>
    Merci.

  2. #2
    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
    Points : 15 059
    Points
    15 059
    Par défaut
    Bonsoir,

    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
    function fiches1(){ 
    				var xhr = getXhr(); 
    				xhr.onreadystatechange = function(){ 
    					if(xhr.readyState == 4 && xhr.status == 200){ 
    						// tu recuperes un text et mets a jours avec innerHTML ici or que ajaxFiche renvoie un xml
    						leselect = xhr.responseText; 
    						// tu dois utiliser getElementsByTagName pour recuperer les valeurs des tag xml
    						document.getElementById('prix').innerHTML = leselect; 
    					} 
    				} 
    				xhr.open("POST","ajaxFiche.php",true); 
    				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
    				var sel = document.getElementById('id_chambre'); 
    				var id_chambre = sel.options[sel.selectedIndex].value;
    				// Tu envoies id_chambre or que dans ajaxFiche.php tu recuperes $_POST["prix"]
    				xhr.send("id_chambre="+id_chambre); 
     
    			}
    J'ai mis des commentaires sur ton code.

    A+.

  3. #3
    Membre à l'essai
    Inscrit en
    Août 2010
    Messages
    9
    Détails du profil
    Informations forums :
    Inscription : Août 2010
    Messages : 9
    Points : 11
    Points
    11
    Par défaut merci
    merci

  4. #4
    Membre à l'essai
    Inscrit en
    Août 2010
    Messages
    9
    Détails du profil
    Informations forums :
    Inscription : Août 2010
    Messages : 9
    Points : 11
    Points
    11
    Par défaut tu peux m explique pour quoi il sa fiche mai pas don le input text
    index.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
    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
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
     <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 regions(){ 
    				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('chambr').innerHTML = leselect; typeadult(); 
    					} 
    				} 
     
    				// Ici on va voir comment faire du post 
    				xhr.open("POST","liste-chambre.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 la destination0. 
     
    				var sel1 = document.getElementById('destination'); 
    				var id_destination = sel1.options[sel1.selectedIndex].value; 
    				xhr.send("id_destination="+id_destination); 
     
    			} 
     
    			function typesejour(){ 
    				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('typecharg').innerHTML = leselect;fiches1();
    					} 
    				} 
     
    				// Ici on va voir comment faire du post 
    				xhr.open("POST","liste-typecharg.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 la region 
     
    				var sel2 = document.getElementById('id_chambre'); 
    				var id_chambre = sel2.options[sel2.selectedIndex].value; 
    				xhr.send("id_chambre="+id_chambre); 
     
    			} 
     
    			function fiches1(){
    				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('fiches').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, l'id de la destination0.
     
     
    				var sel = document.getElementById('id_char');
    				var id_char = sel.options[sel.selectedIndex].value;
    				xhr.send("id_char="+id_char);
     
    			}	
     
         		function typeadult(){ 
    				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('adulte').innerHTML = leselect; 
    					} 
    				} 
     
    				// Ici on va voir comment faire du post 
    				xhr.open("POST","liste-adulte.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 la region 
     
    				var sel3 = document.getElementById('id_chambre'); 
    				var id_chambre = sel3.options[sel3.selectedIndex].value; 
    				xhr.send("id_chambre="+id_chambre); 
     
    			} 
     
     
    		</script>
     
     
     
    <form> 
                                      <label>.</label>
    <select name="destination"  id='destination' onchange='regions()'> 
                          <option value="-1">Toutes les destinations</option>                      
    									<?php 
    						mysql_connect("localhost","root",""); 
    						mysql_select_db("dddddd"); 
    						$res = mysql_query("SELECT id_destination,nom_destination FROM hotel ORDER BY nom_destination"); 
    						while($row = mysql_fetch_assoc($res)){ 
    							echo "<option value='".$row["id_destination"]."'>".$row["nom_destination"]."</option>"; 
    						} 
    					?> 
     
                        </select>
     
    <div id='chambr'> 
     
     
    <select name="chambre" id="id_chambre" onchange='typesejour()'>
      <option value="-1">Toutes les chambres</option>
    </select>
     
     
    </div> 
     
     
    <div id='typecharg'>    
     
    <select name="char" id="id_char">
     <option value="-1">Tous les types de typecharg</option>
    </select>
     
    </div>      
     
     
     
    <div id='fiches'>              
     
     <input id='inputprix' name='prixe' type='text' />
     
    </div>      
     
     
      <div id='adulte'> 
        <select name="adult" id="id_adult">
          <option value="-1">adutl</option>
            </select>
     
        </p>
      </div> 
     
     
    </form>
    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
    14
    15
    16
    17
     
    <?php
     
            include('/connexion.php');
     
         echo "<input id='inputprix' name='prixe' type='text' />";
            if(isset($_POST["id_char"])){
                $id_char=$_POST["id_char"]; 
                $mdr_regions2="SELECT `id_char`,`id_prix` FROM `typecharg` WHERE `id_char`='$id_char'";
                    $res_mdr_regions2=mysql_query($mdr_regions2);
                    while($row = mysql_fetch_assoc($res_mdr_regions2)){
                    
                             echo '<inputNom>'.$row["id_prix"].'</inputNom>';
                    }
            }       
                    echo "</racine>";
    ?>
    liste-typecharg.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
    <?php
            include('/connexion.php');
     
            echo "<select name='char' id='id_char' >";
            
            if(isset($_POST["id_chambre"])){
                $id_chambre=$_POST["id_chambre"];   
                $mdr_chambre2="SELECT `id_chambre`,`id_char`, `id_prix` ,`nom_char` FROM `typecharg` WHERE `id_chambre`='$id_chambre'";
                    $res_mdr_chambre2=mysql_query($mdr_chambre2);
                    while($row = mysql_fetch_assoc($res_mdr_chambre2)){
                            echo "<option value='".$row["id_char"]."'>".$row["nom_char"]."</option>";
                    }
            }       
            echo "</select>";
            
    ?>

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

Discussions similaires

  1. [AJAX] Liste déroulante php mysql ajax javascript
    Par abbescr7 dans le forum AJAX
    Réponses: 26
    Dernier message: 28/05/2015, 22h09
  2. [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
  3. Réponses: 38
    Dernier message: 16/09/2010, 19h27
  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