Comment lier une combobox à un input dans un formulaire?

Version imprimable

28/06/2006, 12h13
MisterCool

Comment lier une combobox à un input dans un formulaire?

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 !
28/06/2006, 13h53
Kerod

Tu devrais te tourner vers Ajax et prendre des infos dessus dans la page cours ;)
28/06/2006, 14h03
MisterCool

Ok je vais voir ça alors.

Merci

Voici une solution avec une page php :

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
 
<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.:roll:

28/06/2006, 14h20
pekka77

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é
28/06/2006, 14h23
pekka77

Citation:

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...
28/06/2006, 14h24
sorenson

voir solution ci-dessus
28/06/2006, 14h31
pekka77

Citation:

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.

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

Fonction javascript :

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
 
 
/**
* 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:

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:

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

28/06/2006, 14h47
pekka77

Pourquoi ne pas tout faire en JS ?
28/06/2006, 14h52
sorenson

Pourquoi ne pas tout faire en JS ?! Et la requête alors, tu la fais en JS aussi ?
28/06/2006, 15h01
pekka77

Citation:

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.

ok, c'est pas grave.

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

Code:

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

28/06/2006, 15h12
pekka77

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