[AJAX] Remplir des champs en fonction d'une list

**efrbeldin** · 14/01/2011, 11h40

Bonjour,

Je me lance dans ajax car il semble que cela réponde à mon besoin. J'ai consulté les tutos et malgré cela je ne vois pas du tout comment faire, je ne suis pas un pro du dev

Pour faire simple, j'ai une page php qui contient des champs list (select) qui sont remplis grâce à une requête, je souhaite qu'en sélectionnant une valeur, une autre requête s'exécute en prenant en paramètre la valeur du champs select et aille chercher des valeurs en base et renseigne deux champs input dans mon php.

La requête serait "select nom,sys from code_module order where id_code_module =$code_appli.value by code_code_module asc"

et nom et sys sont les valeurs que je désire remonter dans mes deux inputs.

Pouvez-vous m'aider? :

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
 <?php
include("./admin/connexion/connexion.php");
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="./css/fiqus.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="conteneur"> 
  <div id="haut"> 
    <?php include("haut.php"); ?>
  </div>
  <div id="intermediaire">
     <?php include("./Menu_Selection.php"); ?>
  </div>
  <div id="bas_2">
  </div>
</div>
</body>
</html>
<?php include("./admin/connexion/deconnect.php"); ?>

Menu_Selection.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
<?php
 
$requete1 = mysql_query("select * from code_module order by code_code_module asc"); 
$requete2 = mysql_query("select * from code_module order by nom_code_module asc"); 
 
 
if (!isset($page)) { $page=""; } 
?>
<table width="910" border="0" align="center" valign="center">
  <tr> 
    <td class='accueil_titre_fushia'>Recherche par Code Application : </td>
    <td><select name='code_Appli'>
 
    <?php while($valeur = mysql_fetch_object($requete1)) { ?>	
    	<option value='"<?php echo $valeur->id_code_module ?>"'><?php echo $valeur->code_code_module ?></option> 
    <?php } ?> 
    </select>
    </td>
    <td class='accueil_titre_fushia'>Recherche par nom d'application : </td>
    <td><select name='nom_module'>  
    <?php while($valeur = mysql_fetch_object($requete2)) { ?>	
    	<option value='"<?php echo $valeur->id_code_module ?>"'><?php echo $valeur->nom_code_module ?></option> 
    <?php } ?> 
    </select>
    </td>
  </tr>
</table>

ajax_remplir_champs.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
function ajax_remplir_champs()
{
    var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //on appelle le fichier reponse.txt
    xhr.open("GET", "???????", false);
    xhr.send(null);
 
    alert(xhr.responseText);

**andry.aime** · 14/01/2011, 12h46

Bonjour,

Une discussion résolue

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

A+.

**efrbeldin** · 14/01/2011, 14h07

Bonjour andry.aime,

Merci pour cette indication j'ai fais quelques modifications mais cela n'a pas l'air de fonctionner, je ne dois pas tout avoir compris. Dans le cas présent, je souhaite prendre la valeur sélectionnée dans le champ list "code_application" sur l’évènement onchange, et aller chercher via la requête présente dans "Recuperation_donnees.php" en passant en paramêtre la valeur du champ list et ensuite mettre à jour automatiquement le champs "nomapplication"

Demandes.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
<?php
include("./admin/connexion/connexion.php");
$page="demandes";
 
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="./css/fiqus.css" rel="stylesheet" type="text/css">
</head>
<body>
<script type="text/javascript" src="./ajax/ajax_remplir_champs.js"></script>
<div id="conteneur"> 
  <div id="haut"> 
    <?php include("haut.php"); ?>
  </div>
  <div id="intermediaire">
     <?php include("./Menu_Selection.php"); ?>
  </div>
  <div id="bas_2">
    		<div>
			<label> Nom de l'application &nbsp;&nbsp;</label>
			<input id="NomApplication" name="NomApplication" type="text" value="" />
			<br />	
		</div>
  </div>
</div>
</body>
</html>
<?php include("./admin/connexion/deconnect.php"); ?>

Ajax_remplir_champs:

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
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 Remplir()
	{
		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('NomApplication').innerHTML = leselect;
			}
		}
 
		// Ici on va voir comment faire du post
		xhr.open("POST","Recuperation_Donnees.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 code_Appli de la catégorie sélectionnée
		sel = document.getElementById('code_Appli');
		categorie = sel.options[sel.selectedIndex].value;
		xhr.send("id_code="+categorie);
	}

Menu_Selection.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
<?php
 
$requete1 = mysql_query("select * from code_module order by code_code_module asc"); 
$requete2 = mysql_query("select * from code_module order by nom_code_module asc"); 
 
 
if (!isset($page)) { $page=""; } 
?>
<table width="910" border="0" align="center" valign="center">
  <tr> 
    <td class='accueil_titre_fushia'>Recherche par Code Application : </td>
    <td><select name='code_Appli' onchange='Remplir()'>
 
    <?php while($valeur = mysql_fetch_object($requete1)) { ?>	
    	<option value='"<?php echo $valeur->id_code_module ?>"'><?php echo $valeur->code_code_module ?></option> 
    <?php } ?> 
    </select>
    </td>
    <td class='accueil_titre_fushia'>Recherche par nom d'application : </td>
    <td><select name='nom_module'>  
    <?php while($valeur = mysql_fetch_object($requete2)) { ?>	
    	<option value='"<?php echo $valeur->id_code_module ?>"'><?php echo $valeur->nom_code_module ?></option> 
    <?php } ?> 
    </select>
    </td>
  </tr>
</table>

Recuperation_Donnes.php :

Code :

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

1
2
 
<?php $requete1 = mysql_query("select nom_code_module from code_module where id_code_module=".$id_code." order by code_code_module asc"); ?>

**andry.aime** · 14/01/2011, 15h28

Tu récupères la valeur postée avec $_POST['id_code'] ensuite tu fait echo des résultats du requête à afficher.

Code :

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

1
2
3
4
5
$id_code="";
if(isset($_POST['id_code'])){
$id_code=$_POST['id_code'];
}
//ici requete et echo

A+.

**efrbeldin** · 14/01/2011, 15h44

Merci pour ta réponse mais en réfléchissant très très fort

j'avais trouvé qu'il fallait passer le paramètre avant la requête et mettre un echo.

Par contre, il ne se passe toujours rien et firefox dans la consol des erreurs me dit que sel is null alors la liste code_Appli (select) existe bien puisqu'il est renseigné.

Je n'arrive pas à trouver où est le problème.

dans ajax_remplir_champs.js : sel = document.getElementById("code_Appli");

Recuperation_donnees.php:

Code :

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

1
2
3
4
5
6
<?php 
if (isset($_POST["idCode"])) {
$requete1 = mysql_query("select nom_code_module from code_module where id_code_module=".$_POST["idCode"]." order by code_code_module asc");
echo $requete1->nom_code_module;
}
 ?>

Ajax_remplir_champs.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
unction 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 Remplir()
	{
		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('NomApplication').innerHTML = leselect;
			}
		}
 
		// Ici on va voir comment faire du post
		xhr.open("POST","Recuperation_Donnees.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 code_Appli de la application sélectionnée
		sel = document.getElementById("code_Appli");
		categorie = sel.options[sel.selectedIndex].value;
		xhr.send("idCode="+categorie);
	}

menu_Selection.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
<?php
 
$requete1 = mysql_query("select * from code_module order by code_code_module asc"); 
$requete2 = mysql_query("select * from code_module order by nom_code_module asc"); 
 
 
if (!isset($page)) { $page=""; } 
?>
<table width="910" border="0" align="center" valign="center">
  <tr> 
    <td class='accueil_titre_fushia'>Recherche par Code Application : </td>
    <td><select name='code_Appli' onchange='Remplir()'>
 
    <?php while($valeur = mysql_fetch_object($requete1)) {  ?>
    	<option value='"<?php $valeur->id_code_module ?>"'> <?php echo $valeur->code_code_module ?></option>;
    <?php } ?> 
 
    </select>
    </td>
    <td class='accueil_titre_fushia'>Recherche par nom d'application : </td>
    <td><select name='nom_module'>  
    <?php while($valeur = mysql_fetch_object($requete2)) { ?>	
    	<option value='"<?php echo $valeur->id_code_module ?>"'><?php echo $valeur->nom_code_module ?></option> 
    <?php } ?> 
    </select>
    </td>
  </tr>
</table>

Demandes.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
<?php
include("./admin/connexion/connexion.php");
$page="demandes";
 
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="./css/fiqus.css" rel="stylesheet" type="text/css">
</head>
<body>
<script type="text/javascript" src="./ajax/ajax_remplir_champs.js"></script>
<div id="conteneur"> 
  <div id="haut"> 
    <?php include("haut.php"); ?>
  </div>
  <div id="intermediaire">
    <?php include("./Menu_Selection.php"); ?>
  </div>
  <div id="bas_2">
    		<div>
			<label> Nom de l'application &nbsp;&nbsp;</label>
			<input id="NomApplication" name="NomApplication" type="text" value="" />
			<br />	
		</div>
  </div>
</div>
</body>
</html>
<?php include("./admin/connexion/deconnect.php"); ?>

**andry.aime** · 14/01/2011, 15h53

Par contre, il ne se passe toujours rien et firefox dans la consol des erreurs me dit que sel is null alors la liste code_Appli (select) existe bien puisqu'il est renseigné.

Parce que ton select n'a pas d'id mais de name or que tu veux récupérer sa valeur à partir de son id (getElementById).

Code :

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

<select name='code_Appli' id="code_Appli" onchange='Remplir()'>

A+.

**efrbeldin** · 17/01/2011, 16h57

Merci pour tout.

J'avais une dernière question, ma requête peut être amenée à retourner plus d'un champ.

Comment faire pour retourner plusieurs valeurs?

echo $row->id_code_module est bien retourné avec xhr.responseText mais si je veux retourner en plus $row->nom_code_module et $row->lib_code_module...

Comment faire avec xhr.responsetext?

Merci d'avance

**andry.aime** · 17/01/2011, 17h06

J'ai donné un lien plus haut.

[AJAX] Remplir des champs en fonction d'une list

AJAX

Discussions similaires

Partager

Partager