[AJAX] Remplir un input par un choix de liste déroulante.

**Neewd** · 01/02/2012, 17h38

Bonsoir,

Je fais appel à votre savoir.
J'aimerais qu'au choix d'une liste déroulante, un formulaire se remplisse.
Je fais déjà apparaitre une autre liste déroulante (liste liées), avec le reponseText, j'ai essayé de comprendre le reponseXML pour pouvoir afficher les résultats de mes requêtes dans les champs, mais je n'ai aucune connaissance en XML et pas assez en AJAX pour pouvoir le faire seul.

Voici le code js ainsi que le bout du formulaire.

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
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 change()
	{
		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 clients
				document.getElementById('ordi').innerHTML = leselect;
			}
		}
 
		// Ici on va voir comment faire du post
		xhr.open("POST","../Adresses/infos.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('client');
		userid = sel.options[sel.selectedIndex].value;
		xhr.send("client="+userid);
        }
<html>
  <head>
    <title>Formulaire pour fiches techniques</title>
    <link rel="stylesheet" type="text/css" href="http://localhost/glpi/inc/style.css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
<body>
<div id="principale">
<form>
    <form method="get" name="select">
        <table class="tab_cadre_fixe">
            <tr>
                <th colspan="4" align="center" class="tab_cadre_report" >
                    CLIENT
                </th>
            </tr>
            <tr>
                <td colspan="1">Selectionnez le Client :
                <td colspan="1">
                    <select id="client" name="client"onchange="change()">
                        <?php
                            echo "<option id='user' value='-1'>Nouvel utilisateur</option>";
                            while($ligne=mysql_fetch_row($liste))
                            {   
                                echo '<option id="user" value="'.$ligne[0].'" '.(($ligne[0] == $id)?"selected":"").'>'.$ligne[1].'</option>';
                            }
                        ?>
                    </select>
                </td>
                <td>
                     <span name='ordi' id='ordi'>
                     </span>
                </td>
                <td class="tab_bg2 center" id="bouton">
                        <input type="submit" value="OK" class="submit">
                </td>
            </tr>
        </table>
    </form>
<form action="../front/index.form.php" name="infoos">
        <table class="tab_cadre_fixe">
            <tr>
                <th colspan="4" align="center" class="tab_cadre_report" >
                    INFORMATIONS CLIENT
                </th>
            </tr>
            <tr>
                    <div id="informations">
                         <tr>
                            <td> Identifiant : </td>
                            <td><input type="text" name="login" value="<?php echo $login ?>"></td>
                         </tr>
                        <tr>
                            <td>Nom : </td>
                            <td>
                                <input type="text" name="name" value="<?php echo $name ?>">
                            </td>    
                            <td>Prenom : </td>
                            <td>
                                <input type="text" name="prename"value="<?php echo $prename ?>">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="1">Adresse : </td>
                            <td colspan="1">
                                <input type="text" size="50" name="adresse" value="<?php echo $adresse ?>">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="1">Code Postal :</td>
                            <td>
                                <input type="text" maxlength="5" name="cp" value="<?php echo $cp ?>">
                            </td>
                            <td colspan="1">Ville : </td>
                            <td>
                                <input type="text" maxlength="40" name="ville" value="<?php echo $ville ?>">
                            </td>
                        </tr>
                        <tr>
                            <td>T&eacute;l&eacute;phone fixe : </td>
                            <td>
                                <input type="text" maxlength="10" name="telf" value="<?php echo $fixe ?>">
                            </td>
                            <td>T&eacute;l&eacute;phone Portable: </td>
                            <td>
                                <input type="text" maxlength="10" name="telp" value="<?php echo $portable ?>">
                            </td>
                        </tr>
                        <tr>
                            <td>E-Mail : </td>
                            <td>
                                <input type="text" id ="emailadresse" maxlength="40" name="mail" value="<?php echo $mail ?>">
                            </td>
                        </tr>           
                    </div>
        </table>
    </form>

Et mon fichier .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
    $host = 'localhost';
    $user = 'root';
    $mdp = '';
    $base = 'glpi';
    mysql_connect($host,$user,$mdp) or die("Impossible de se connecter");
    mysql_select_db($base) or die("Impossible de se connecter");
 
    echo "<select name='ordi' id='ordi'>";
        $res = mysql_query("SELECT id,name FROM glpi_computers
            WHERE users_id=".$_POST["client"]."");
        echo '<option value="-1"> -- Nouvel Ordinateur-- </option>';
         while($row = mysql_fetch_row($res))
         {
             echo "<option value='".$row[0]."'>".$row[1]."</option>";
         }
     echo "</select>";

Là j'affiche une autre liste déroulante.
Et j'aimerais sur ce même fichier, pouvoir remplir un input qui se tient dans le formulaire.

Si quelqu'un pouvait m'expliquer comment faire ?

PS : Je tiens à signaler que j'ai déjà regarder sur internet et les différents sujets déjà crées, et je n'ai pas réussi à reproduire la même chose.

Merci d'avance !

**Neewd** · 02/02/2012, 12h23

En farfouillant et en faisant plein de test, nous avons trouvé la solution.

Résolu

Pour ceux que ça intéresseraient, il faut se tourner vers le xml.
Charger les résultats de votre requête dans un tableau XML.

Et ensuite pour accéder aux valeurs de se tableau et les insérer dans un input suivez cette syntaxe.
Elle n'est peut-être pas la plus adaptée, mais cela fonctionne très bien .

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("mail").value = leselect.getElementsByTagName("descriptif")[8].firstChild.nodeValue;

Le "mail" est l'id de votre input.
leselect correspond à la reponseXML de votre requête xhr.
descriptif correspond au nom du champ de votre tableau xml.
Et 8 correspond a la ligne du tableau.

Sachant que notre tableau est comme suit.

<info>
<descriptif />
<descriptif />
...
</info>

[AJAX] Remplir un input par un choix de liste déroulante.

AJAX

Vue hybride

Discussions similaires

Partager

Partager