Combobox Dynamique avec JS

Version imprimable

Bonjour,

Je sais que se sujet à déjà été abordé à de nombreuses reprises sur différents forums mais je n'arrive pas à tout comprendre :oops:
Je débute en js et ajax.

J'aimerais donc avoir un exemple que je comprend :) pour pouvoir m'en servir ensuite dans le développement de mon site.

J'ai une combobox remplis à l'aide d'une table contenant la liste de tous les pays avec un id (ex: FR) et un libelle (ex: France).

Je remplis ma combobox avec tout les id.

Je souhaiterais que lorsque l'utilisateur choisie un id que le libelle du pays correspondant dans la base s'affiche dynamiquement dans une texte box.

voici ce que j'ai pour l'instant :
Code:

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 <html lang="fr"> <script language="javascript"> function changer2(){ document.form.champs.value= /* c'est ici que je coince */ } </script> <body> <form name="form"> <table> <tr> <td>Liste des Id Pays : </td> <td> <SELECT name="ListId" size="1" onChange="changer2();"> <?php require 'connect.php'; $req = $pdo->query('SELECT codePays FROM pays;'); $rep = $req->fetchAll(); foreach($rep as $row){ echo '<option>'.$row['codePays'].'</option>'; } ?> </SELECT> </td> <td>Libelle du pays : </td> <td> <input type="text" name="champs"> <td> </tr> </table> </form> </body> </html>
Merci à quiconque voudrait bien aider le débutant que je suis :)

Bonjour,

Tu as essayé ça ?
Code:

1 2 document.form.champs.value=document.form.ListId.value;

09/01/2013, 15h04
Markast

Bonjour pc75,

Oui et sa fonction parfaitement :ccool:

Mais alors comment je fais pour exécuter une requête dynamique sur ma base à partir de cette id pays obtenu et ainsi afficher le libelle du pays correspondant?

J'ai un peu avancé mais un petit coup de main serait le bienvenu :)

Je m'essaye à l'ajax mais pour l'instant c'est loin d'être une franche réussite.

voici donc ma page html avec le srcipt js et l'affichage côté client :

Code:

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
 
<html lang="fr">
	<script language="javascript">	
		function changer2(){		
		var idCourant = document.form.champs.value;
 
		// création de l'objet xhr
		if (window.XMLHttpRequest)
		   xhr = new XMLHttpRequest();
		else if (window.ActiveXObject) 
		   xhr = new ActiveXObject("Microsoft.XMLHTTP");
 
		// codage de la réponse 	
 
		xhr = createRequestObject();
		xhr.open('POST', 'test.php', true);
		xhr.onreadystatechange = handleAJAXReturn;
		xhr.send(null);
 
		 if (xhr.readyState == 4)
	         {
		   if (xhr.status == 200)
		   {
		   //appel de la page test.php en luis passant l' "idCourant" en        
                   //parmaètre?
                   }	         
                   else
		   {	
	           }		
 
		}
	</script>	
 
	<body>
		<form name="form">
		<table>
		<tr>
		    <td>Liste des Id Pays :   </td>
		    <td>						
		     <SELECT name="ListId" size="1" onChange="changer2();">
			<?php
                         require 'connect.php';
                         $req = $pdo->query('SELECT codePays FROM pays;');
                         $rep = $req->fetchAll();
                         foreach($rep as $row){
                            echo '<option>'.$row['codePays'].'</option>';
                          }
                         ?>							
		      </SELECT>
		     </td>
		     <td>Libelle du pays : </td>
		     <td>
			  <input type="text" name="champs">
		    </td>
		</tr>
		</table>
	       </form>
	</body>
</html>

et ma page test.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<?php	
	require 'connect.php';
	$codePays=$_POST['idCourant'];
	$req = $pdo->query("SELECT fr FROM pays WHERE codePays       
        ='".$codePays."';");
	$req->setFetchMode(PDO::FETCH_BOTH);// Mode par défaut (tableau)
	$news = $req->fetch();	
	$req->closeCursor();
	$req = null;
	echo $news['fr'];
?>

Est ce que je m'y prend correctement et si oui, comment faire pour appeler ma page test.php en lui passant l'idCourant choisit dans la combobox en paramètre ?