comment récupérer l'option choisie avec html:select

Version imprimable

23/07/2007, 12h12
fakhita

comment récupérer l'option choisie avec html:select
Bonjour,

je veux récupérer l'option qui est selectionnée par l'utilisateur par html:select et html:option.

j'ai donc le code suivant:
Code:

1 2 3 4 <html:select property="pratiqueId"> <html:options collection="pratiques" property="id" labelProperty="abreviation" /> </html:select>
je veux que l'option choisi s'affiche avant l'envoi du formulaire dans la même page.

merci d'avance.
23/07/2007, 12h13
zorm

il va falloir faire de l'ajax pour ca en mettant un déclencheur onchange dans le html:select
23/07/2007, 12h22
fakhita

merci pour votre réponse, je suis débutante et je ne sais pas comment faire, pouvez-vous m'aider avec un exemple de code.

Pas necessaire d'utiliser Ajax, si tu n'as pas besoin d'info qui vienne du server.

simplement en js :

Code:

1
2
3
4
5
6
7
8
9
<script>
function taListeChange(){
alert(document.getElementById('taListe').value);
}
</script>
 
<html:select property="pratiqueId" styleId="taListe" onclick="taListeChange()">	
     <html:options   collection="pratiques" property="id" labelProperty="abreviation" />
</html:select>

23/07/2007, 14h25
OButterlin
Comme willoi, mais directement par les propriétés du formulaire
Code:

1 2 document.forms[0].pratiqueId.value
ça évite de définir un styleId dans la balise <html:select>

Mais c'est dans la même idée...

A+
23/07/2007, 15h11
willoi
Citation:
Envoyé par OButterlin

Comme willoi, mais directement par les propriétés du formulaire

Code:

1 2 document.forms[0].pratiqueId.value

ça évite de définir un styleId dans la balise <html:select>

Mais c'est dans la même idée...

A+
Encore faut-il etre sur qu'il n'y'a qu'un seul formulaire dans la page(s'il y'a des includes ou de tiles ...)
Pour cette raison, je prefere travailler avec des ids. Mais bon, tout depend du contexte ...
23/07/2007, 15h37
OButterlin

C'est clair, 9 fois sur 10 je préférerai ta solution, mais c'était juste pour info...

S'il y a plusieurs formulaires, on peut aussi y accéder par leur nom (si nommé bien sûr) ou leur ordre d'apparition
document.forms[0] pour le premier
document.forms[1] pour le deuxième
etc...

ou

document.MonFormulaire1
document.MonFormulaire2
etc...
23/07/2007, 16h27
zorm

Citation:

Envoyé par willoi

Pas necessaire d'utiliser Ajax, si tu n'as pas besoin d'info qui vienne du server.simplement en js

J'ai dit ajax, mais je rappelle que ajax ne fait rien d'autre qu'utiliser javascript et la techno xml. Bref, dire qu'il faut faire de l'ajax, ca revient a dire qu'on va utiliser du javascript :P.
23/07/2007, 16h35
OButterlin

Citation:

Envoyé par zorm

J'ai dit ajax, mais je rappelle que ajax ne fait rien d'autre qu'utiliser javascript et la techno xml. Bref, dire qu'il faut faire de l'ajax, ca revient a dire qu'on va utiliser du javascript :P.

Il y a de la mauvaise foi dans l'air :mrgreen:
Mettre javascript et AJAX au même niveau, c'est gonflé...
23/07/2007, 16h40
zorm

Citation:

Envoyé par OButterlin

Il y a de la mauvaise foi dans l'air :mrgreen:
Mettre javascript et AJAX au même niveau, c'est gonflé...

ah bon:ange:. Pour moi le javascript est un langage de programmation alors que l'ajax est une (pseudo)amélioration/évolution du javascript et absolument pas un langage à part entière.
Peut etre que je me trompe :roll:
23/07/2007, 17h09
OButterlin

Pour moi l'ajax (Asynchronous Javascript And Xml) n'est qu'une possibilité d'intérroger un serveur et de récupérer un fichier xml ou un flux à partir de javascript (sans avoir à quitter la page).
C'est donc lié à l'objet XMLHttpRequest (ou ActiveXObject(Microsoft.XMLHTTP) avec IE).
23/07/2007, 17h49
willoi

Citation:

Envoyé par willoi

Pas necessaire d'utiliser Ajax, si tu n'as pas besoin d'info qui vienne du server.

Grosso modo c'est ce que je disais, si tu n'as pas besoin d'info venant du serveur, tu n'as pas besoin d'Ajax.
23/07/2007, 18h03
fakhita

j'ai essayé le code de willoi, mais dès que j'essai de selectionner l'item il me sort une alerte avec id 1, je ne peux même pas choisir une autre option que la première.
23/07/2007, 18h08
OButterlin

C'est parce que willoi a utilisé l'évènement onclick, tu devrais essayer avec onchange et/ou onblur
23/07/2007, 19h17
fakhita

merci, ça marche, mais il m'affiche l'id, qu'est ce que je fais si je veux afficher autre chose que l'id, un autre champ de la table (un autre élément de la collection)
24/07/2007, 07h29
zorm

Peut etre qu'enfin l'ajax va avoir son utilité finallement :yaisse2:
24/07/2007, 08h28
OButterlin

Ce serait du genre onchange("afficheAutreChose('<bean:write.../>');")
24/07/2007, 16h44
fakhita

oui, je veux afficher un autre élément de ma collection, tout ce que je réussi à afficher maintenant c'est soit l'id soit l'élément selectionner, mais moi je veux afficher un autre attribut de l'élément selectionner.

merci d'avance.

Bon, en résumé, tu as un id + un libellé (pour la combo) et tu voudrais afficher une autre information, c'est bien ça ?
Alors, soit tu fais plaisir à zorm (et il aimerait bien que tu utilises ajax :mrgreen:), soit tu construits une liste d'objets javascript qui te permettra de construire la combo et d'afficher des informations complémentaires (tu peux utiliser onload pour la construction de la combo)

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
 
<head>
<script ...>
 
var liste = new Array();
 
function MonObjet(id, libelle, comment, valeur)
{
   this.id = id;
   this.libelle = libelle;
   this.comment = comment;
   this.valeur = valeur;
}
 
function ajouterValeur(id, libelle, comment, valeur)
{
   liste[liste.length] = new MonObjet(id, libelle, comment, valeur);
}
...
 
function creerCombo()
{
   var combo = document.getElementById("maCombo");
   if ( combo == null ) return;
 
   for ( var i = 0; i < liste.length; i++ )
   {
      combo.options[combo.options.length] = new Option( liste[i].libelle, liste[i].id);
   }
}
 
function afficherInfo(id)
{
   for ( var i = 0; i < liste.length; i++ )
   {
      if ( liste[i].id == id )
      {
         alert("Mes infos :\n- " + liste[i].comment + "\n- " + liste[i].valeur);
         return;
      }
   }
}
</script>
</head>
 
<body>
...
<select name="maCombo" id="maCombo" onchange="afficherInfo(this.value)">
</select>

C'est un exemple (incomplet), à toi de t'en inspirer...

A+