Insérer une valeur automatiquement par rapport à un menu déroulant

**mateo78711** · 30/11/2012, 12h45

Bonjour,

Je poste un sujet car j'ai une interrogation concernant le javascript.

Je veux faire une fiche de mise à jour en jsp de données attributaires pour un objet graphique. Pour le moment, cette fiche de mise à jour fonctionne.

Pour les champs à mettre à jour avec des valeurs bloquées, j'ai une table de nomenclature qui me permet de lister des valeurs. Cette table contient deux champs: TYPE_NOMEN, VALEUR_NOM, VAL_DIVERS

TYPE_NOMEN me permet de récupérer les noms des communes en faisant une sélection des valeurs commune_nom. VALEUR_NOM comporte les noms des communes et VAL_DIVERS contient le code insee.

Dans mon code je fais une requête me permettant de récupérer une partie des valeur selon le champ TYPE_NOMEN et j'affiche les valeurs du champ VALEUR_NOM dans ma liste déroulante.

Ma question est la suivante: Au moment de mettre à jour les informations est-il possible d'afficher une valeur dans un Input par rapport à une valeur d'un menu déroulant?

Exemple: J'ai un champ ''Nom Commune'' pour lequel j'ai un menu déroulant, et un champ ''Code Insee''.

En choisissant dans mon menu déroulant une commune, j'aimerai que le code insee de la commune choisie s'affiche automatiquement. Et en validant la mise à jour les deux champs sont mise à jour.

Code java :

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
	Connection pConnection = ds.getConnection ();
		String strNOM_PROGRAMME = null;
		String strCOMMUNE = null;
	        String strDEPCOM = null;
 
 
 	//
	SimpleDateFormat dateFormater = new SimpleDateFormat("dd/MM/yyyy");
 
	if (strAction.equalsIgnoreCase ("UPDATE"))	
	{
		strNOM_PROGRAMME = request.getParameter ( "ENT_NOM_PROGRAMME" );  if (strNOM_PROGRAMME != null)	  strNOM_PROGRAMME = strNOM_PROGRAMME.trim();
		strCOMMUNE = request.getParameter ( "ENT_COMMUNE" );  if (strCOMMUNE != null)	  strCOMMUNE = strCOMMUNE.trim();
		strDEPCOM = request.getParameter ( "ENT_DEPCOM" );  if (strDEPCOM != null)	  strDEPCOM = strDEPCOM.trim();
 
 
	 try {  
	  Statement pStatementMaj = pConnection.createStatement();
	  StringBuffer sqlMaj = new StringBuffer();
	   sqlMaj.append ("UPDATE Foncier_prospect_hab_2026 SET NOM_PROGRAMME = q'[" + strNOM_PROGRAMME + 
									"]', COMMUNE = q'[" + strCOMMUNE + 
									"]', DEPCOM = q'[" + strDEPCOM + 
									"]' WHERE objectid = " + strKeyFieldValue);
	  pStatementMaj.executeUpdate (sqlMaj.toString());
	  pStatementMaj.close();
	  } catch (Exception e) {
	 }
	}
	//
	//
	Statement pStatement = pConnection.createStatement();
	StringBuffer sql = new StringBuffer();
	//
	String strWhereClause = "OBJECTID = " + strKeyFieldValue;
	sql.append ("SELECT * FROM Foncier_prospect_hab_2026 WHERE " + strWhereClause);
	//
	ResultSet pResultSet = pStatement.executeQuery (sql.toString());
	if (pResultSet.next())
	{
	   strNOM_PROGRAMME = pResultSet.getString ("NOM_PROGRAMME");
	   strCOMMUNE  = pResultSet.getString ("COMMUNE");
	   strDEPCOM  = pResultSet.getString ("DEPCOM");
  }	
 
 
 if (strNOM_PROGRAMME != null)
         strNOM_PROGRAMME = strNOM_PROGRAMME.trim();
 
         strCOMMUNE = strCOMMUNE.trim();
		  if (strZONAGE != null)
         strDEPCOM = strDEPCOM.trim();
		  if (strEST_LOGT != null)
 
 
 
			//Liste de valeurs
 
	Statement pStatement3 = pConnection.createStatement();
	StringBuffer sql3 = new StringBuffer();
 
	sql3.append("SELECT VALEUR_NOM, VAL_DIVERS FROM NOMENCLATURE_CAMY WHERE TYPE_NOMEN = 'commune_nom' OR TYPE_NOMEN = 'vide' ORDER BY VALEUR_NOM ASC");
	ResultSet pResultSet3 = pStatement3.executeQuery(sql3.toString());
 
	String strCOMMUNE_LISTE = null;
 
	ArrayList vCOMMUNE = new ArrayList();
 
	while (pResultSet3.next())
	{
		strCOMMUNE_LISTE = pResultSet3.getString("VALEUR_NOM"); 
		if (strCOMMUNE_LISTE != null && !strCOMMUNE_LISTE.equals(""))
		{
			if(!strCOMMUNE_LISTE.equals(strCOMMUNE))
		  	vCOMMUNE.add ("<option value=\"" + strCOMMUNE_LISTE + "\">" + strCOMMUNE_LISTE + "</option>");
			else
		  	vCOMMUNE.add ("<option value=\"" + strCOMMUNE_LISTE + "\" selected>" + strCOMMUNE_LISTE + "</option>"); 
		}
	}
 
 
	pResultSet3.close();
	pStatement3.close();
 
 
 
	pResultSet.close();
	pStatement.close();
	pConnection.close();
 
%>

Pour afficher mes données j'ai un tableau :

Code jsp :

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
	<tr>
				<td class="headerProspect2026">
					Commune :
				</td>
				<td class="valueProspect2026">
					<%
                                out.println ("<select sizze=\"1\" name=\"ENT_COMMUNE\" style=\"width:100%\">");
                                for (int i = 0; i < vCOMMUNE.size(); ++i)
                                {
                                        out.println ((String) vCOMMUNE.get(i));
                                }
                                out.println("<select>");
                                %>
				</td>
			</tr>
 
	<tr>
				<td class="headerProspect2026">
					Code INSEE :
				</td>
				<td class="valueCellvacant">
				 <%  strDEPCOM = StringHelper.replaceNull (strDEPCOM, "");
               strDEPCOM = StringHelper.replaceSpecialChar (strDEPCOM);
              %>
			   <input name="ENT_DEPCOM" type="text" value="<%=strDEPCOM%>" style={width:100%}>
				</td>
			</tr>

J'ai épuré le code pour afficher juste trois champs, en espérant ne pas avoir retiré un truc en trop. ça n'est pas trop grave pour mon exemple vu que ma fiche marche bien pour le moment.

Je vous remercie pour vos réponses.

Si vous avez une solution, pourriez vous me dire où mettre le bout de code car je n'y connait rien de rien de rien...... Et je n'ai pas trouvé comment mettre les couleurs au code sur le forum. (premier post avec du code).

**SylvainPV** · 30/11/2012, 20h03

Bonjour,

Merci de ne pas poster de Java ou de JSP, mais le code HTML généré au final

Pour changer la valeur d'un champ texte input à chaque fois qu'on change de choix dans une liste déroulante, oui c'est faisable et assez facile si l'on dispose des données en Javascript.
Dans ton cas le plus simple serait d'ajouter l'information dans un data-attribute de tes éléments <option> , comme ça pas besoin de toi de pousser plus loin le Javascript si tu n'y connais rien.

Voilà un exemple, le code est assez parlant:
http://jsfiddle.net/n7KC3/

**NoSmoking** · 30/11/2012, 20h04

Bonjour,

Je poste un sujet car j'ai une interrogation concernant le javascript.

c'est pas gagné

Ma question est la suivante: Au moment de mettre à jour les informations est-il possible d'afficher une valeur dans un Input par rapport à une valeur d'un menu déroulant?

Tu récupères la value du SELECT, les codes peuvent se trouver dans la value des OPTIONs, que tu l'affectes à la value de l'INPUT

car je n'y connait rien de rien de rien

il va falloir t'y mettre

**mateo78711** · 03/12/2012, 12h58

Merci pour vos réponses.

Tout d'abord, j'ai utilisé le lien de SylvainPV auquel j'ai fait quelques modifications pour tester.

Maintenant, avec le code ci-dessous, je peux à partir de mon menu déroulant mettre à jour le champ de ma commune et celui du code insee. ça marche. Je pense qu'il y a des éléments qui ne servent à rien mais comme ça fonctionne, je ne touche as trop.

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
<tr>
		<td class="headerProspect2026">
		Commune : 
		</td>
 
		<td class="valueCellvacant">
	<%  strCOMMUNE = StringHelper.replaceNull (strCOMMUNE, "- NR -");
        strCOMMUNE = StringHelper.replaceSpecialChar (strCOMMUNE);
        %>
	<select name="ENT_COMMUNE" id="choix-ville" type="text" value="<%=strCOMMUNE%>" style={width:100%}>
		<option data-insee=""></option>					
		<option data-insee="70361">Commune 1</option>
		<option data-insee="70118">Commune 2</option>
		<option data-insee="71202">Commune 3</option>
	</select>
		</td>
 
	<script type="text/javascript"> function updateCOMMUNE()
        {   var input = document.getElementById("choix-ville");
                var select = document.getElementById("choix-ville");
                var selectedOption = select.options[select.selectedIndex];
                input.value = selectedOption.getAttribute("choix-ville") || "";
        }
        updateCOMMUNE();
        document.getElementById("choix-ville").onchange = updateCOMMUNE;
        </script>						
</tr>
 
<tr>				
		<td class="headerProspect2026">
		Code INSEE
		</td>		
		<td class="valueCellvacant">
	<%  strDEPCOM = StringHelper.replaceNull (strDEPCOM, "");
        strDEPCOM = StringHelper.replaceSpecialChar (strDEPCOM);
        %>             
		<input name="ENT_DEPCOM" type="text" id="code-insee" value="<%=strDEPCOM%>"/>
	<script type="text/javascript"> function updateDEPCOM()
        {
                var input = document.getElementById("code-insee");
                var select = document.getElementById("choix-ville");
                var selectedOption = select.options[select.selectedIndex];
                input.value = selectedOption.getAttribute("data-insee") || "";
        }
        updateDEPCOM();
        document.getElementById("choix-ville").onchange = updateDEPCOM;
        </script>
		</td>
</tr>

Par contre quand je fais la mise à jour, les valeurs choisies reviennent sur la première valeur de mon menu sélection (dans mon cas, la première valeur est vide).
Si je rouvre la fiche de mise à jour, la première valeur apparait dans ma fiche et non pas les valeurs déjà saisies. Par conséquent si je refais une mise à jour, je dois resélectionner la commune sinon j'efface les valeurs.

Comment faire, lorsque j'ouvre ma fiche de mise à jour, pour avoir comme valeur pour le champ commune et le champ code insee les valeurs déjà saisies et non pas la première valeur de mon menu déroulant?

Merci pour vos réponses.

**mateo78711** · 03/12/2012, 14h43

J'ai trouvé la première partie de ma réponse. ce n'est peut être pas top mais ça marche :

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
 
<td class="valueCellvacant">
	<%  strCOMMUNE = StringHelper.replaceNull (strCOMMUNE, "- NR -");
        strCOMMUNE = StringHelper.replaceSpecialChar (strCOMMUNE);
        %>
	<select name="ENT_COMMUNE" id="choix-ville" type="text" style={width:100%}>
		<option selected><%=strCOMMUNE%></option>
		<option data-insee=""></option>					
		<option data-insee="70361">Commune 1</option>
		<option data-insee="70118">Commune 2</option>
		<option data-insee="71202">Commune 3</option>		
	</select>
		</td>
 
	<script type="text/javascript"> 
 
        function updateCOMMUNE()
        {   var input = document.getElementById("choix-ville");
                var select = document.getElementById("choix-ville");
                var select.defaultvalue=document.getElementById("COMMUNE");
                var selectedOption = select.options[select.selectedIndex];
                input.value = selectedOption.getAttribute("choix-ville") || "";
        }
        updateCOMMUNE();
        document.getElementById("choix-ville").onchange = updateCOMMUNE;
        
 
        </script>

J'ai ajouté <option selected><%=strCOMMUNE%></option>.

cela donne un menu déroulant qui m'affiche en première valeur, la valeur déjà sélectionnée.

Par exemple, j'ai un objet dont la commune est Commune 2.

Mon menu déroulant donne ça:
Commune 2
''vide''
Commune 1
Commune 2
Commune 3

Le menu déroulant s'ouvre sur Commune 2 en vert.

Auriez vous une solution qui permet d'enlever la valeur verte afin que la valeur Commune 2 qui est utilisée soit celle entre Commune 1 et Commune 3?

Par contre je n'ai toujours pas de solution pour récupérer la valeur par défaut du code insee. J'ai testé placeholder mais une fois la mise à jour faite et si la cellule est vide, ça efface la valeur.

**SylvainPV** · 03/12/2012, 16h02

Bonjour,

Il faut revoir le code serveur de parsing des options :

Code :

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

1
2
3
4
5
6
7
<select name="ENT_COMMUNE" id="choix-ville" type="text" style={width:100%}>
		<option selected><%=strCOMMUNE%></option>
		<option data-insee=""></option>					
		<option data-insee="70361">Commune 1</option>
		<option data-insee="70118">Commune 2</option>
		<option data-insee="71202">Commune 3</option>		
	</select>

Déclare tes options en Java et fais un loop en JSP pour créer chaque tag <option>. Ca te permettra d'ajouter l'attribut selected à celle qui est préselectionnée au chargement de la page.

Mais il ne s'agit plus de Javascript, donc ça sort du scope de ce forum.

Insérer une valeur automatiquement par rapport à un menu déroulant

JavaScript

Discussions similaires

Partager

Partager