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

**fripette** · 19/05/2008, 12h02

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 !

**zorm** · 19/05/2008, 12h06

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

**fripette** · 19/05/2008, 12h28

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 !

**OButterlin** · 19/05/2008, 12h36

Tu peux faire un truc dans le genre...

Code :

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

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+

**fripette** · 19/05/2008, 14h37

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 :

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

**OButterlin** · 19/05/2008, 15h39

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
 <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+

**fripette** · 19/05/2008, 15h47

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 :

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

**OButterlin** · 19/05/2008, 15h57

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

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
 <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+

**fripette** · 19/05/2008, 17h26

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 :

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
<!-- 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

**OButterlin** · 19/05/2008, 17h32

Envoyé par fripette

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

Loin de moi cette pensée

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+

**fripette** · 19/05/2008, 17h46

aucuns soucis merci merci !!!

**OButterlin** · 20/05/2008, 09h50

Comme promis...

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

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
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+

**fripette** · 20/05/2008, 10h05

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 :

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

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 :

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

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.

**OButterlin** · 20/05/2008, 11h27

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 :

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

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

si c'est OK pour toi

)

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

JavaScript

Discussions similaires

Partager

Partager