Combobox Dynamique avec JS

**Markast** · 09/01/2013, 14h29

Bonjour,

Je sais que se sujet à déjà été abordé à de nombreuses reprises sur différents forums mais je n'arrive pas à tout comprendre

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 php :

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
<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

**pc75** · 09/01/2013, 14h59

Bonjour,

Tu as essayé ça ?

Code :

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

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

**Markast** · 09/01/2013, 15h04

Bonjour pc75,

Oui et sa fonction parfaitement

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?

**Markast** · 11/01/2013, 10h24

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 html :

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
 
<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 php :

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

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 ?

Combobox Dynamique avec JS

JavaScript

Discussions similaires

Partager

Partager