activater un input grisé à partir d'une valeur particuliere d'un select

Version imprimable

19/05/2008, 12h02
fripette

activater un input grisé à partir d'une valeur particuliere d'un select

Bonjour,
J'aimerai mettre dans ma jsp un champ input grisé qui s'activerait lorsque le champ "autre" de mon menu déroulant serait sélectionné.
Voici un exemple :
mon menu déroulant contient plusieurs valeurs pré-remplies :
<250,<500,<2500,<5000 et autre.

Lorsque l'utilisateur sélectionnera le champ "autres" il faudrait que la page s'actualise (sans passer par la servlet) et que le champ input s'active.

Je sais que je dois utiliser du javascript et onchange.
Cependant je ne sais pas comment utiliser l'option onchange de mon select.
En effet, le onchange sera actif pour tous les élèments de mon menu déroulant or je veux que le onchange s'applique uniquement lorsque la valeur "autre" est sélectionné.

Auriez vous un schema type ou une idée svp ?
Merci d'avance !
19/05/2008, 12h06
zorm

Je sais pas si cette question a vraiment sa place sur le forum Java.

Effectivement, le problème se resolvera surement avec du javascript, voila pourquoi il serait plus approprié de la posée dans la partie Javascript du forum ;)
http://www.developpez.net/forums/forumdisplay.php?f=23
19/05/2008, 12h28
fripette

Comme je voulais l'intégrer dans une page jsp, je pensais que c'était le forum approprié mais je vais aller le poster chez les Javascript.
Merci !

Tu peux faire un truc dans le genre...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<select name="Selector" ... onchange="checkAutre()"/>
   ...
</select>
<input type="text" name="Autre" disabled/>
 
<script>
function checkAutre()
{
   if ( document.forms[0].Selector.value == "AUTRE" ) document.forms[0].Autre.disabled = false;
else document.forms[0].Autre.disabled = true;
}
</script>

A+

Merci pour ta réponse rapide !!
J'ai essayé et adapté à ma sauce mais la mayo n' a pas pris.
Voilàl e bout de code dans ma page jsp:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
 <tr>
        	<td>Legionella</td>
        	<td><input name="<%= UFCInpLeg %>" value="" type="text" size="25" disabled/></td>
 
        	<td><SELECT name="UFCLeg" onchange="checkAutre()"/>
				<OPTION value="" selected></OPTION>
				<% for (int j=0;j<listUFC.length;j++){ %>
					<OPTION value="<%= listUFC[j] %>" ><%= listUFC[j] %></OPTION>			
				<% } %>
				<OPTION value="Autre" >Autre</OPTION>
			</SELECT></td>
		</tr>	
 
		<script type="text/JavaScript" language="JavaScript">
		# alert ("Execute la fonction checkAutre()");  
        	function checkAutre(){
   				if ( document.forms[0].UFCLeg.value == "Autre" ) document.forms[0].Autre.disabled = false;
				else document.forms[0].Autre.disabled = true;
				}
        </script>

Merci de ton éclairage

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 <tr>
            <td>Legionella</td>
            <td><input name="<%= UFCInpLeg %>" value="" type="text" size="25" disabled/></td>
        
            <td><SELECT name="UFCLeg" onchange="checkAutre()"/>
                <OPTION value="" selected></OPTION>
                <% for (int j=0;j<listUFC.length;j++){ %>
                    <OPTION value="<%= listUFC[j] %>" ><%= listUFC[j] %></OPTION>            
                <% } %>
                <OPTION value="Autre" >Autre</OPTION>
            </SELECT></td>
        </tr>    
        
        <script type="text/JavaScript" language="JavaScript">
            function checkAutre(){
                   if ( document.forms[0].UFCLeg.value == "Autre" ) document.forms[0].<%= UFCInpLeg %>.disabled = false;
                else document.forms[0].<%= UFCInpLeg %>.disabled = true;
                }
        </script>

Comme le nom de ton champ est variable, il faut également mettre la variable jsp dans le script ;)

A+

Désolée pour cette erreur bête :(.
Cependant ca ne marche toujours pas. J'ai ajouté de plus un alert. Qui est bien retourné lors de la génération de la page .jsp.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
 <tr>
        	<td>Legionella</td>
        	<td><input name="UFCInpLeg" value="" type="text" size="25" disabled/></td>
 
        	<td><SELECT name="UFCLeg" onchange="checkAutre()"/>
				<OPTION value="" selected></OPTION>
				<% for (int j=0;j<listUFC.length;j++){ %>
					<OPTION value="<%= listUFC[j] %>" ><%= listUFC[j] %></OPTION>			
				<% } %>
				<OPTION value="Autre" >Autre</OPTION>
			</SELECT></td>
		</tr>	
 
		<script type="text/JavaScript" language="JavaScript">
		# alert ("Execute la fonction checkAutre()");  
        	function checkAutre(){
   				if ( document.forms[0].UFCLeg.value == "Autre" ) document.forms[0].Autre.disabled = false;
				else document.forms[0].Autre.disabled = true;
				}
        </script>

Mais apres lorsque je choisis autre dans le menu déroulant, encéphalogramme plat ...

Oui, mais là, tu as de nouveau changé le nom du champ, il faudrait le fixer une fois pour toute !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 <tr>
        	<td>Legionella</td>
        	<td><input name="UFCInpLeg" value="" type="text" size="25" disabled/></td>
        
        	<td><SELECT name="UFCLeg" onchange="checkAutre()"/>
				<OPTION value="" selected></OPTION>
				<% for (int j=0;j<listUFC.length;j++){ %>
					<OPTION value="<%= listUFC[j] %>" ><%= listUFC[j] %></OPTION>			
				<% } %>
				<OPTION value="Autre" >Autre</OPTION>
			</SELECT></td>
		</tr>	
		
		<script type="text/JavaScript" language="JavaScript">
		# alert ("Execute la fonction checkAutre()");  
        	function checkAutre(){
   				if ( document.forms[0].UFCLeg.value == "Autre" ) document.forms[0].UFCInpLeg.disabled = false;
				else document.forms[0].UFCInpLeg.disabled = true;
				}
        </script>

Il ne faut pas oublier le nom dans la partie javascript

A+

Bon au risque de passer pour une folle-allumée-schizophrène : je te redonne mon code avec le contexte autour (et qui ne marche pas ).
Je remis UFCLeg et UFCLegInp en variable car je me suis rendue compte que ces valeurs changent à chaque tour de boucle.
Dernier message avant abandon et cette fois je vous mets le contexte:

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
50
51
52
53
54
55
56
57
58
59
60
61
62
<!-- TABLE CONCERNANT LES PRELEVEMENTS -->	
	<% for (int i=1;i<4;i++){
          String idPrelevement="idPrelevement"+i;
          
          String UFCInpLeg="UFCInpLeg"+i;
          String UFCLeg="UFCLeg"+i;
          
          String UFCInpLegPneu="UFCInpLegPneu"+i;
          String UFCLegPneu="UFCLegPneu"+i;
          
          String ConcluInp="ConcluInp"+i;
          String Conclu="Conclu"+i;
          %>
          <hr width="50%" align="center">
        <table cols="3">
    	<!-- Entête du tableau -->
        <tr bgcolor=#DDDDDD>
        	<td>Codes pr&eacute;l&egrave;vement</td>
        	<td>R&eacute;sultat Manuel UFC/L</td>
          	<td>R&eacute;sultat UFC/L</td>
        </tr>
          	
        <tr>
        	<td><input name="<%= idPrelevement %>" value="" type="text" size="25"></td>
        </tr>
        
         
        <tr>
        <td>Legionella</td>
        	<td><input name="<%= UFCInpLeg %>" value="" type="text" size="25" disabled/></td>
        
        	<td><SELECT name="<%= UFCLeg %>" onchange="checkAutre()"/>
				<OPTION value=""  selected></OPTION>
				<% for (int j=0;j<listUFC.length;j++){ %>
					<OPTION value="<%= listUFC[j] %>" ><%= listUFC[j] %></OPTION>			
				<% } %>
				<OPTION value="Autre">Autre</OPTION>
			</SELECT></td>
		</tr>	
		
		<script type="text/JavaScript" language="JavaScript">
		# alert ("Execute la fonction checkAutre()");  
        	function checkAutre(){
   				if ( document.forms[0].<%= UFCLeg %>.value == "Autre" ) document.forms[0].<%= UFCInpLeg %>.disabled = false;
				else document.forms[0].<%= UFCInpLeg %>.disabled = true;
				}
        </script>
        
  	<tr>	
			<td>Legionella pneumo</td>			
        	<td><input name="<%=UFCInpLegPneu %>" value="" type="text" size="25"></td>
        	
        	<td><SELECT name="<%=UFCLegPneu %>">
			<OPTION value="" selected></OPTION>
			<% for (int l=0;l<listUFC.length;l++){ %>
				<OPTION value="<%= listUFC[l] %>" ><%= listUFC[l] %></OPTION>
			<% } %>
			</SELECT></td>			
        </tr>
        </table>
      <%}%>

Si vous pouviez jeter un DERNIER (promis) coup d'oeil ! S'il vous plait !
Merci infiniment

19/05/2008, 17h32
OButterlin

Citation:

Envoyé par fripette

Bon au risque de passer pour une folle-allumée-schizophrène

Loin de moi cette pensée :P

Citation:

Envoyé par fripette

Si vous pouviez jeter un DERNIER (promis) coup d'oeil ! S'il vous plait !

Promis... mais demain, là, il faut que j'y aille ;)

A+
19/05/2008, 17h46
fripette

aucuns soucis merci merci !!!

Comme promis... ;)

(J'ai fait quelques adaptations, à toi de voir si elles t'intéressent...)

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
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
 
<html>
<head>
    <script type="text/JavaScript" language="JavaScript">
    function checkAutre(idx)
    {
        if ( document.forms[0].elements["UFCLeg"+idx].value == "Autre" ) document.forms[0].elements["UFCInpLeg"+idx].disabled = false;
        else 
        {
            document.forms[0].elements["UFCInpLeg"+idx].disabled = true;
            document.forms[0].elements["UFCInpLeg"+idx].value = "";
        }
    }
    </script>
</head>
 
<body>
<form>
<% 
String[] listUFC = { "Option 1", "Option 2", "Option 3", "Option 4"};
 
for (int i=1; i < 4; i++)
{
%>
<hr width="50%" align="center">
<table cellpadding="0" cellspacing="0">
 
    <!-- Entête du tableau -->
    <tr bgcolor=#DDDDDD>
        <td>Codes pr&eacute;l&egrave;vement</td>
        <td>R&eacute;sultat Manuel UFC/L</td>
        <td>R&eacute;sultat UFC/L</td>
    </tr>
 
    <tr>
        <td><input name="idPrelevement<%=i%>" value="" type="text" size="25"></td>
    </tr>
 
 
    <tr>
        <td>Legionella</td>
        <td><input name="UFCInpLeg<%=i%>" value="" type="text" size="25" disabled/></td>
        <td>
            <SELECT name="UFCLeg<%=i%>" onchange="checkAutre(<%=i%>)">
                <OPTION value=""  selected></OPTION>
<% 
for (int j=0; j < listUFC.length; j++)
{ 
%>
                <OPTION value="<%= listUFC[j] %>" ><%= listUFC[j] %></OPTION>            
<% 
} 
%>
                <OPTION value="Autre">Autre</OPTION>
            </SELECT>
        </td>
    </tr>    
 
 
    <tr>    
        <td>Legionella pneumo</td>            
        <td><input name="UFCInpLegPneu<%=i%>" value="" type="text" size="25"></td>
 
        <td>
            <SELECT name="UFCLegPneu<%=i%>">
                <OPTION value="" selected></OPTION>
<%
for (int l=0; l < listUFC.length; l++)
{ 
%>
                <OPTION value="<%= listUFC[l] %>" ><%= listUFC[l] %></OPTION>
<% 
}
%>
            </SELECT>
        </td>            
    </tr>
</table>
<%}%>
</form>
</body>
</html>

A+

MERCI !! Je vais en mettre pleins la vue à mon maitre de stage grâce à toi MERCI ! (je lui dirai que tu m'as aidé ;))

MAIS j'aimerai comprendre pourquoi mon code ne marchait pas stp !
ton code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script type="text/JavaScript" language="JavaScript"> function checkAutre(idx) { if ( document.forms[0].elements["UFCLeg"+idx].value == "Autre" ) document.forms[0].elements["UFCInpLeg"+idx].disabled = false; else { document.forms[0].elements["UFCInpLeg"+idx].disabled = true; document.forms[0].elements["UFCInpLeg"+idx].value = ""; } } </script>
ma tentative de code:
Code:

1 2 3 4 5 6 7 8 <script type="text/JavaScript" language="JavaScript"> # alert ("Execute la fonction checkAutre()"); function checkAutre(){ if ( document.forms[0].<%= UFCLeg %>.value == "Autre" ) document.forms[0].<%= UFCInpLeg %>.disabled = false; else document.forms[0].<%= UFCInpLeg %>.disabled = true; } </script>
1/ je remarque que tu as mis le javascript entre les balises <head></head>
2/ tu as remplacé (c'est surtout ca que je ne comprend pas) mes variables <%= UFCLeg %> par ["UFCLeg"+idx] : il me semble donc qu'il n'est pas possible d'utilise l'astuce du <%= %> dans la partie JS ?

Merci pour tes adaptations de mon code !
Beau boulot Bravo Bravo !

PS/ je tenais à m'excuser pour le libellé du sujet "activater" étourderie de ma part.

Le problème venait du fait que ta méthode javascript avait toujours le même nom mais était sensée traiter des noms de variable différents (incohérence)
C'est donc la dernière méthode qui gagne !
D'où le passage de l'indice en paramètre (étant donné que le préfixe des noms de champ était connu)
On aurait pu faire un appel de ce type :
Code:

1 2 3 4 5 6 7 8 9 10 function checkAutre(nomSelect, nomChamp) { if ( document.forms[0].elements[nomSelect].value == "Autre" ) ... else ... } et dans la page jsp <select name="<%=UFCLeg%>" ... onchange="checkAutre('<%=UFCLeg%>', '<%=UFCInpLeg%>')" > ... </select>
mais en gardant une méthode javascript unique (qu'elle soit dans la partie HEAD ou dans la partie <BODY>) !

Voilà, en espérant que ces explications t'aideront (si ce n'est pas clair, préviens-moi)
Sinon, bonne continuation (et n'oublie pas le tag :resolu: si c'est OK pour toi ;))