Comment lier une combobox à un input dans un formulaire?

**MisterCool** · 28/06/2006, 12h13

Bonjour,

Dans un formulaire, je voudrais relier une combobox à un input. C'est-à-dire que lorsqu'on sélectionne une valeur dans la combobox, le champ input doit être modifié automatiquement.

A noter que l'information à afficher dans le champs input doit être extraite de la base de données par une requête SQL.

En fait, la combobox contient des codes d'aliments et l'input doit afficher le libellé du produit en fonction du code aliment sélectionné.

Ca fait plus de 2h que je galère dessus donc si quelqu'un pouvait m'aider je lui en serais très reconnaissant...

Merci d'avance pour votre aide !

**Kerod** · 28/06/2006, 13h53

Tu devrais te tourner vers Ajax et prendre des infos dessus dans la page cours

**MisterCool** · 28/06/2006, 14h03

Ok je vais voir ça alors.

Merci

**sorenson** · 28/06/2006, 14h20

Voici une solution avec une page 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
 
<body>
<!-- un fomulaire-->
<form action="cettePage" method="post" id="frmCodeAliments">
 
<select id="lstAliments" onChange="document.getElementById['frmCodeAliments'].submit();">
<option id="0">code aliment 1</option>
<option id="1">code aliment 2</option>
<option id="2">code aliment 3</option>
</select>
 
<?
//Recherche de l'existance d'une variable, d'un choix.
if(isset($_REQUEST["lstAliments"])){
//Récupère le code de l'aliment.
codeAliment=$_REQUEST["lstAliments"];
 
//Ici la requête
rqSel="select nomaliment from tblaliment where id_aliment=".codeAliment;
rstSel=mysql_query(rqSel,mysql_link);
 
 if(mysql_num_rows(rstSel)<>0){ 
  nomAliment=mysql_result(rstSel,0,0);
 }else{
  nomAliment="Aucun aliment correspondant à la référence.";
 }
 
}
?>
 
<input type="text" name="txtNomAliment" value="<? print nomAliment; ?>">
 
</form>

Voilà, moi j'ai fait ça en 5 minutes à main levée et pourtant c'est moi qui suis au chômage...

Bon courage quand même.

**pekka77** · 28/06/2006, 14h20

Je connais pas bien AJAX mais c'est possible en utilisant que du javascript...
Il suffit de créer une fonction à appeler dans le onChance du select et cette fonction rempli l'input en fct de la valeur sélectionnée (récupérable facilement).
Si c'est juste ça, c'est pas bien compliqué

**pekka77** · 28/06/2006, 14h23

Envoyé par sorenson

Voici une solution avec une page php :

Oui mais là la page est rechargée à chaque fois qu'on modifie la valeur du select...

**sorenson** · 28/06/2006, 14h24

voir solution ci-dessus

**pekka77** · 28/06/2006, 14h31

Envoyé par sorenson

voir solution ci-dessus

Oui j'ai bien vu. Ce que t'as fait marche surement mais à chaque changement de valeur du select la page est rechargé avec une laison client - serveur, alors qu'on peut tout faire en restant du coté du client.

**sorenson** · 28/06/2006, 14h42

alors si tu veux pas que ta page soit rechargée, tu peut utilisé php, javascript et Xhttp.

Fonction javascript :

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
 
 
/**
* Voici la fonction javascript qui sera appellée sur un choix dans la liste.
*/
 
function rechercheAliment(codeAliment){
 
 var xhr_object = null; 
 
 if(window.XMLHttpRequest) // Firefox 
    xhr_object = new XMLHttpRequest(); 
  else if(window.ActiveXObject) // Internet Explorer 
    xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
  else { // XMLHttpRequest non supporté par le navigateur 
    return false; 
 }  
 
 xhr_object.open("POST", "recherche.php?codeAliment="+codeAliment, true); 
 
 xhr_object.onreadystatechange = function() { 
   if(xhr_object.readyState == 4){
	if(navigator.appName=="Netscape"){
 	  var ObjCadre=document.getElementById("txtNomAliment");
        }else{
	  var ObjCadre=document.all["txtNomAliment"];
        }   
        ObjCadre.value=xhr_object.responseText;
   }
}
xhr_object.send(null);
}

Voici le formulaire :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<body>
<!-- un fomulaire-->
<form action="" method="post" id="frmCodeAliments">
<select id="lstAliments" onChange="rechercheAliment(document.getElementById['lstAliments'].options[document.getElementById['lstAliments'].selectedIndex].value);">
<option id="0">code aliment 1</option>
<option id="1">code aliment 2</option>
<option id="2">code aliment 3</option>
</select>
<input type="text" id="txtNomAliment" value="">
</form>

page 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
 
<?
//Recherche de l'existance d'une variable, d'un choix.
if(isset($_REQUEST["lstAliments"])){
//Récupère le code de l'aliment.
codeAliment=$_REQUEST["lstAliments"];
 
//Ici la requête
rqSel="select nomaliment from tblaliment where id_aliment=".codeAliment;
rstSel=mysql_query(rqSel,mysql_link);
 
 if(mysql_num_rows(rstSel)<>0){ 
  nomAliment=mysql_result(rstSel,0,0);
 }else{
  nomAliment="Aucun aliment correspondant à la référence.";
 }
 
}
 
print nomAliment;
?>

**pekka77** · 28/06/2006, 14h47

Pourquoi ne pas tout faire en JS ?

**sorenson** · 28/06/2006, 14h52

Pourquoi ne pas tout faire en JS ?! Et la requête alors, tu la fais en JS aussi ?

**pekka77** · 28/06/2006, 15h01

Envoyé par sorenson

Pourquoi ne pas tout faire en JS ?! Et la requête alors, tu la fais en JS aussi ?

Ah oui javais mal compris ce qu'il voulait. Je croyais ke tu parlais de la requete qui construit le select. Oui donc là c'est parafit il manque juste à remplir l'input.

**sorenson** · 28/06/2006, 15h04

ok, c'est pas grave.

Donc, pour en finir, c'est le morceau de code ci-dessous qui rempli le input.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
xhr_object.onreadystatechange = function() { 
   if(xhr_object.readyState == 4){
	if(navigator.appName=="Netscape"){
 	  var ObjCadre=document.getElementById("txtNomAliment");
        }else{
	  var ObjCadre=document.all["txtNomAliment"];
        }   
        ObjCadre.value=xhr_object.responseText;
   }
}

**pekka77** · 28/06/2006, 15h12

MisterCool je crois que tu peux bien remercier sorenson parce qu'il t'a tout fait! Et très bien en plus!!

Comment lier une combobox à un input dans un formulaire?

JavaScript

Discussions similaires

Partager

Partager