[AJAX] Alimenter un input à partir d'une liste

**bosserieux** · 05/02/2008, 15h53

Voici un extrait de ma page 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Gestion des appels téléphonique</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <META http-equiv="Refresh" content="90">
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
	<script type='text/javascript'>
function chgAction(Destination){
document.forms[0].action=Destination;
document.forms[0].submit();}
	</script>
	<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 de la liste déroulante
			*/
			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('interlocuteur').innerHTML = leselect;
						//document.forms['message']elements['Telephone'].value =xhr.responseText.split['#@#@#@#@#'][1]
					}
				}
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax_interlocuteur.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('contact');
				idcontact = sel.options[sel.selectedIndex].value;
				xhr.send("idContact="+idcontact);
			}
 
		</script>
 
 
   </head>
   <body>
 
   <h3> Gestion des appels téléphonique</h3>
 
   <?php
   include 'connection.php'; ?>	  
 
<!-- **************************************************************************************************************************************** -->  
 
   <div id="dial">
   <form method="post" name="message">
   <fieldset>
   <p> <label> Saisie du message : <select name="NomEmpSaisie">
 
   <?php
$SQL = "SELECT NomEmp FROM employe";
$res = mysql_query($SQL);
while($val=mysql_fetch_array($res))
{
   echo "<option>".$val["NomEmp"]."</option>";
}
?>
    </select></label></p>
 
   <p> <label> Destinataire : <select name="NomEmpRecu">
 
   <?php
$SQL = "SELECT NomEmp FROM employe";
$res = mysql_query($SQL);
while($val=mysql_fetch_array($res))
{
   echo "<option>".$val["NomEmp"]."</option>";
}
?>
 
	</select></label> </p>
	<p><input type="button" onclick="chgAction('employe.php')" value="Gérer les employés" /></p>
 
   </fieldset>
   </div>
 
   <!-- **************************************************************************************************************************************** --> 
 
   <div id="infos">
   <fieldset>
 
<p> <label>Nom contact : <select name="contact" id="contact" onchange="go()">
	<option value='-1'>Aucun</option>
 
   <?php
$SQL = "SELECT Code, Nom, Ville FROM contact ORDER BY Nom ASC";
        $res = mysql_query($SQL);
 
        while($val=mysql_fetch_array($res))
        { 
    ?>
             <option value="<?php echo $val['Code'];?>">
	         <?php echo $val['Nom']; ?> &nbsp; &nbsp; <?php echo $val['Ville']; ?>
             </option>
   <?php } 
?>
 
   </select></label></p>
   <p><input type="button" onclick="chgAction('contact.php')" value="Gérer les contacts"></p>
 
   <p> <label> Nom interlocuteur : <select name="interlocuteur" id="interlocuteur" onchange="go()">
 
   <option value='-1'>Choisir un contact</option>
 
   </select></label> 
 
   <input type="button" onclick="chgAction('interlocuteur.php')" value="Gérer les interlocuteurs" /></p>
 
   <p> <label> Numéro à rappeler : <input type="text" name="Telephone" id="Telephone" ></label> </p>   
 
   </fieldset>
   </div>

Voici le code de ma page ajax_interlocuteur.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
<?php
if(isset($_POST["idContact"])){
        
        include 'connection.php';
        
$SQL = "SELECT i1.NumInterlo, i1.NomInterlo, i1.CivInterlo FROM interlocuteur i1, intervenir i2 WHERE Code=".$_POST['idContact']." AND i2.NumInterlo=i1.NumInterlo ORDER BY i1.NomInterlo Asc" or die(mysql_error()) ;
$res = mysql_query($SQL);
 
/*$req = "SELECT Telephone FROM contact WHERE Code=".$_POST['idContact']." "or die(mysql_error()) ;
$resul=mysql_query($req);

$nb_lignes=mysql_num_rows($res)
if ($nb_lignes > 0)
{*/
while($val=mysql_fetch_assoc($res))
{
   ?>
             <option value="<?php echo $val['NomInterlo'];?>">
	         <?php echo $val['CivInterlo']; ?> <?php echo $val['NomInterlo']; ?>
             </option>
   <?php
}
 
/*document.forms['nofrom']elements['nomelement'].value =xhr.responseText.split['#@#@#@#@#'][1]

var tempso=xhr.responseText
leselect=tempso.split('#@#@#@#@#')[0]
telephone=split('#@#@#@#@#')[1]

while($vale=mysql_fetch_assoc($resul))
{
   ?>
             <input value="<?php echo $val['Telephone'];?>">
   <?php*/
}
/*}*/
?>

Comme vous pouvez le voir, le select qui a pour name interlocuteur est alimenté automatiquement lorsque 'lon fait un choix dans la premiere liste qui a pour name contact. (ces 2 listes se trouvent en bas de ma page index.php).
Ca fonctionne très bien.

Le problème est que je désire maintenant alimenter mon input qui a pour name Telephone à partir du choix de la premiere liste qui a pour name contact.
Que ce soit pour alimenter la 2ème liste ou le input, le traitement s'éxecute à partir de la premiere liste déroulante (celle qui a pour name contact), je pense donc que la fonction va rester la même.
Malheureusement je ne sais pas comment m'y prendre et je bloque.

Je demande donc votre aide chers confreres.

**riete** · 06/02/2008, 10h02

Excuse moi, essaye d'être un peu plus synthétique dans ta façon de poser tes questions. Ya trop de code et celà prends du temps pour comprendre le mécanisme. Je comprends que toi tu sois dans le truc alors que les autres doivent prendre un temps pas toujours disponible pour te comprendre.
J'espère que tu ne sera pas véxé

**bosserieux** · 06/02/2008, 10h28

Ne t'inquiete pas riete, je ne suis pas vexé. Si je suis là c'est pour m'améliorer un maximum et apprendre pleins de choses.
Donc je vais essayé de synthétiser si tu veux.
Ce que je veux reste identique à mon premier message :

Voici mon code AJAX :

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
<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 de la liste déroulante
			*/
			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('interlocuteur').innerHTML = leselect;
						//document.forms['message']elements['Telephone'].value =xhr.responseText.split['#@#@#@#@#'][1]
					}
				}
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax_interlocuteur.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
				sel = document.getElementById('contact');
				idcontact = sel.options[sel.selectedIndex].value;
				xhr.send("idContact="+idcontact);
			}
 
		</script>

Ma premiere liste déroulante correspond à ça :

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
<select name="contact" id="contact" onchange="go()">
	<option value='-1'>Aucun</option>
 
   <?php
$SQL = "SELECT Code, Nom, Ville FROM contact ORDER BY Nom ASC";
        $res = mysql_query($SQL);
 
        while($val=mysql_fetch_array($res))
        { 
    ?>
             <option value="<?php echo $val['Code'];?>">
	         <?php echo $val['Nom']; ?> &nbsp; &nbsp; <?php echo $val['Ville']; ?>
             </option>
   <?php } 
?>
 
   </select>

Je veux alimenter un input à partir de cette liste. Le code de mon input est le suivant :

Code :

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

<input type="text" name="Telephone" id="Telephone" >

Lorsque je fais un choix dans ma premiere liste ça déclenche le traitement suivant :

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
<?php
if(isset($_POST["idContact"])){
        
        include 'connection.php';
        
$SQL = "SELECT i1.NumInterlo, i1.NomInterlo, i1.CivInterlo FROM interlocuteur i1, intervenir i2 WHERE Code=".$_POST['idContact']." AND i2.NumInterlo=i1.NumInterlo ORDER BY i1.NomInterlo Asc" or die(mysql_error()) ;
$res = mysql_query($SQL);
 
while($val=mysql_fetch_assoc($res))
{
   ?>
             <option value="<?php echo $val['NomInterlo'];?>">
	         <?php echo $val['CivInterlo']; ?> <?php echo $val['NomInterlo']; ?>
             </option>
   <?php
}
 
}
?>

Pour mon input la requête serait différente et correspondrait à ça :

Code :

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

$SQL = "SELECT NumInterlo, Telephone FROM contact WHERE Code=".$_POST['idContact']." " or die(mysql_error()) ;

J'espere que j'aurais été plus clair cette fois même si le code est long mais je ne peux pas faire mieux.

**riete** · 06/02/2008, 11h40

A priori mon message n'est pas bien passé

**bosserieux** · 06/02/2008, 11h56

Désolé mais je ne peux pas exposer un problème "complexe" avec une seule ligne de code !
Le problème est résolu grâce au grand SpaceFrog que je remercis encore une fois.

Je ne mais pas la solution car ça va faire trop de codes...
Si vous la voulez contactait moi.

**riete** · 06/02/2008, 15h10

Envoyé par bosserieux

Désolé mais je ne peux pas exposer un problème "complexe" avec une seule ligne de code !

Sans vouloir être rabat joie, je pense qu'il est parfois interessant d'essayer de synthétiser ton problème avec le moins de blabla possible. Car "je parle moi moi", on essaye parfois de répondre alors que nous sommes au boulot et s'il est possible d'éviter de perdre du temps pour chercher la réponse, ce n'est que mieux.
Bon je suis loin d'être capable de répondre à toutes les questions, mais au moins j'essaye d'aider les autres, comme les autres l'aide. Dans la mesure du possible.

Envoyé par bosserieux

Le problème est résolu grâce au grand SpaceFrog que je remercis encore une fois.

Je suis content que tu ais eu ta réponse. Mais ce que je ne comprends pas, c'est que SpaceFrog, n'est pas passé déposer une réponse sur le forum?

Voilà j'espère que tu comprends un peu mieux mon raisonnement avec ces explications.
A+

[AJAX] Alimenter un input à partir d'une liste

JavaScript

Discussions similaires

Partager

Partager