JSP + HTML : onchange ne fonctionne pas

Version imprimable

07/01/2014, 17h35
SI_BDD

JSP + HTML : onchange ne fonctionne pas
Bonjour ,

Je suis sur un nouveau projet web en JSP, HTML et JS,..
Sur une des pages jsp, je souhaite exécuter une action sur un champs de type FILE qui me permettra de récupérer la valeur du champs en faisant comme suit :
Code:

1 2 <input type="file" id="id" name="name" size="50" onchange="monAction();">
monAction() est une action java script, qui me permet de tester la valeur du champs dont l'id est "id".

Le souci, l'action du "onchange" ne s’exécute jamais.

Avez vous une suggestion ?

Merci par avance
07/01/2014, 17h44
Nico02

Salut,

Je ne vois rien de particulier au premier abort, tu peux nous montrer ton code JS ?
07/01/2014, 17h46
plawyx
Citation:
Envoyé par SI_BDD

Code:

1 2 <input type="file" id="id" name="name" size="50" onchange="monAction();">

monAction() est une action javascript, qui me permet de tester la valeur du champs dont l'id est "id".

Le souci, l'action du "onchange" ne s’exécute jamais.
ne s'exécute jamais ou ne fais pas ce que tu souhaites ?

essaye:

Code:

onchange="alert('Coucou');

Si la fenêtre apparaît, cela vient sûrement du code de "monAction()".

Peut-on le voir ?
08/01/2014, 09h32
SI_BDD

mon action est elle incorrecte ?
Bonjour,

Merci pour les réponses.
Effectivement le

Code:

onchange="alert('Coucou');

fonctionne.

Mon code de l'action est :
Code:

1 2 3 4 5 6 7 function monAction() { if(document.getElementById("id")!=null) { var val= document.getElementById("id"); bool= val!=null && val!= '' ? true : false ; } }
En sachant que bool est une variable de type boolean que j'ai initialisé au debut de la JSP.

Mon action est incorrecte ?

Cordialement

Citation:

Envoyé par plawyx

ne s'exécute jamais ou ne fais pas ce que tu souhaites ?

essaye:

Code:

onchange="alert('Coucou');

Si la fenêtre apparaît, cela vient sûrement du code de "monAction()".

Peut-on le voir ?
08/01/2014, 10h11
oliv37

Je te conseille d'installer le module complémentaire firebug pour ton navigateur firefox. Cela va te permettre de détecter les erreurs javascript.
08/01/2014, 10h26
SI_BDD

Merci oliv37. Avec la version de firefox de l'entreprise, il ny'a pas de version de firebug dispo ( 17.0.6 )

Cordialement

Citation:

Envoyé par oliv37

Je te conseille d'installer le module complémentaire firebug pour ton navigateur firefox. Cela va te permettre de détecter les erreurs javascript.
08/01/2014, 10h29
Nico02
Si tu veux récupérer la valeur associée à un élément tu dois le préciser

Code:

var val= document.getElementById("id").value;

Sinon cela fait référence à l’élément entier de l'arbre DOM

Ensuite pour tester l'existence d'un objet en javascript tu peux simplement écrire

Code:

if( document.getElementById( "id" ) )

ou alors

Code:

if( typeof(document.getElementById("id") ) != 'undefined' )

mais il n'est pas nécessaire de tester son existence étant donnée que tu l'écris en dur dans ton code, donc cet élément sera toujours présent.

Pour finir il me semble (mais là je n'en suis pas sur) que les valeurs des éléments ne sont jamais null, mais simplement vide.

Ducoup tu dois pouvoir écrire ton code comme ça
Code:

1 2 3 4 5 function monAction() { bool = document.getElementById("id").value != ''; alert ( 'Mon champ est-il rempli ? ' + bool ); }
08/01/2014, 10h34
oliv37

As-tu essayé de mettre un alert('ok') dans ta fonction monAction pour bien vérifier qu'elle n'est pas exécutée ?
08/01/2014, 10h47
SI_BDD
merci pr les réponses, en faisant ainsi :
Code:

1 2 3 4 5 function monAction(){ alert('ok'); bool= document.getElementById("id").value != ''; alert ( 'Mon champ est-il rempli ? ' + bool); }
Résulat :
J'ai droit juste à un "ok".

Donc pour moi

Code:

document.getElementById("id").value != ''

ne me renvoie rien. c'est très étonnant

Par contre, je viens de faire un autre test comme suit :

Code:

alert ( 'Mon champ est-il rempli ? ' + document.getElementById("id").value != '' );

l'alerte m'affiche un "true" quand je saisi quelque chose dans mon champs. Ceci dit, je pense que c'est lors de l'utilisation de ma variable booléenne que ça ne marche pas super bien.

je vais continuer les investigations.

Citation:

Envoyé par oliv37

As-tu essayé de mettre un alert('ok') dans ta fonction monAction pour bien vérifier qu'elle n'est pas exécutée ?
08/01/2014, 11h14
SI_BDD
Pour vérifier la valeur de la variable "bool" avant et après l’exécution de l'action, je remarque que la valeur reste toujours à "false".
Peut être il faudrait rafraichir la page ? des idées pour cela ?

Merci.

Cordialement
Citation:
Envoyé par SI_BDD

merci pr les réponses, en faisant ainsi :

Code:

1 2 3 4 5 function monAction(){ alert('ok'); bool= document.getElementById("id").value != ''; alert ( 'Mon champ est-il rempli ? ' + bool); }

Résulat :
J'ai droit juste à un "ok".

Donc pour moi

Code:

document.getElementById("id").value != ''

ne me renvoie rien. c'est très étonnant

Par contre, je viens de faire un autre test comme suit :

Code:

alert ( 'Mon champ est-il rempli ? ' + document.getElementById("id").value != '' );

l'alerte m'affiche un "true" quand je saisi quelque chose dans mon champs. Ceci dit, je pense que c'est lors de l'utilisation de ma variable booléenne que ça ne marche pas super bien.

je vais continuer les investigations.
08/01/2014, 11h14
Nico02

Mais elle est initialisé ou cette variable bool au fait ?
08/01/2014, 11h25
oliv37

C'est du javascript donc pas besoin de rafraîchir la page.
Effectivement il faudrait nous montrer le code complet.
Etant donné que c'est une variable globale, peut-être que tu la modifies également dans une autre partie du code...
08/01/2014, 11h26
SI_BDD
Tout au début de la jsp entre
Code:

1 2 3 <% boolean bool = false; %>
et la fonction entre
Code:

1 2 <script </script>
Est ce que cela pose problème ? je n'ai pas vraiment l'habitude d'utiliser trop de javascript

merci

Citation:

Envoyé par Nico02

Mais elle est initialisé ou cette variable bool au fait ?
08/01/2014, 11h29
oliv37
pour déclarer une variable en javascript il me semble qu'il faut utiliser le mot-clé var.
Code:

1 2 var bool = false;
08/01/2014, 13h00
Nico02
Citation:
Envoyé par oliv37

pour déclarer une variable en javascript il me semble qu'il faut utiliser le mot-clé var.

Code:

1 2 var bool = false;
Tu peux très bien te passer du mot clé var il n'y a pas de soucis de se coté là.

Par contre @SI_BDD je pense que tu fais une grosse confusion dans ce que fais JSP.

Le code JSP d'une page s’exécute coté serveur et est donc exécute avant le code JavaScript qui lui est exécuté sur le poste client. Tu ne peux donc pas mêler tes variables comme tu le fais (en tout cas pas comme ça).

Comme je ne sais pas vraiment se que tu veux faire avec se code je ne peux t'aider plus que ça, mais je t'invite en tout cas à lire de la documentation sur JSP et l'interaction avec du javascript :)

Cdt.
08/01/2014, 13h01
SI_BDD
En regardant de plus prés ma jsp, je me rend compte que ma variable bool est initialisée dans une scriptlet ( java), donc c'est côté serveur si j'ai bien compris.

c'est à cause de ça que la variable ne prend jamais la nouvelle valeur car le code java n'est exécuté que au chargement de la jsp ?

Comment faire pour remédier à cela ?

Merci
Citation:
Envoyé par oliv37

pour déclarer une variable en javascript il me semble qu'il faut utiliser le mot-clé var.

Code:

1 2 var bool = false;
08/01/2014, 13h43
Nico02

Exactement,

Lorsque que tu écris une page JSP, elle est d'abord interprétée coté serveur. Tous les appels à tes beans et au code java en général est fait coté serveur.

Les tags JSP correspondent à des "marqueurs" qui sont remplacé par les valeurs de ton code Java. Une fois cette phase effectuée, la page ainsi générée est envoyé au client pour être interprété par le navigateur qui va afficher le contenu.

Il est donc ici logique que tu ne puisses plus accéder à tes variables serveur coté client.

Les solutions qui te reste sont, soit de valider ta page (submit de ton formulaire par exemple) et d'effectuer ton traitement à se moment là (puisque la page est renvoyé au serveur avec tes nouvelles valeurs).
Soit d'utiliser AJAX pour faire un appel serveur.

Mais comme je ne sais toujours pas quel est le but de tout ça, je n'en dirai pas plus ;)

Cdt.

Code:

1 2 3 4 5 6 7 8 <script> <% boolean bool = false; ... out.print("var bool = " + bool); %> </script>
mais si c'est comme tu l'as montré, ceci suffit
Code:

1 2 3 4 <script> var bool = false; </script>

Merci pour l'explication.
En fait le but de ce que je suis entrain de faire est de voir si un champs est rempli, pour afficher/ou pas un autre champs.
Ce que je viens de faire et qui fonctionne sans utiliser une variable côté serveur est de changer ma fonction javaScript pour rendre visible ou pas mon deuxième champs comme suit :
Code:

1 2 3 4 5 6 7 function monAction(){ document.getElementById("id").style.visibility="hidden"; bool= document.getElementById("id").value != ''; if (bool== true){ document.getElementById("champs2").style.visibility="visible"; }else { document.getElementById("champs2").style.visibility="hidden"; }
je suis entrain de tester pour voir ce que ça donne, vu ce que je vois ca fonctionne seulement si mon champs est de type text ( pas pour file par exemple )
Code:

1 2 <input type="file" id="id" name="idName" size="65" onchange="monAction();">
cdt

Citation:

Envoyé par Nico02

Exactement,

Lorsque que tu écris une page JSP, elle est d'abord interprétée coté serveur. Tous les appels à tes beans et au code java en général est fait coté serveur.

Les tags JSP correspondent à des "marqueurs" qui sont remplacé par les valeurs de ton code Java. Une fois cette phase effectuée, la page ainsi générée est envoyé au client pour être interprété par le navigateur qui va afficher le contenu.

Il est donc ici logique que tu ne puisses plus accéder à tes variables serveur coté client.

Les solutions qui te reste sont, soit de valider ta page (submit de ton formulaire par exemple) et d'effectuer ton traitement à se moment là (puisque la page est renvoyé au serveur avec tes nouvelles valeurs).
Soit d'utiliser AJAX pour faire un appel serveur.

Mais comme je ne sais toujours pas quel est le but de tout ça, je n'en dirai pas plus ;)

Cdt.

Dans se cas tu ne dois pas utiliser de variables serveur ça n'a aucun intérêt, continue sur du JS pur.

Par contre je peux t'assurer que ça marche aussi pour les <input type="file">

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
 
 
<html>
<head>
<script>
 
function checkField()
{
 
if( document.getElementById('t1').value != '' )
{
 document.getElementById('id2').style.visibility="visible";
}
else
 document.getElementById('id2').style.visibility="hidden";
}
 
 
function checkFile()
{
 
if( document.getElementById('f1').value != '' )
{
 document.getElementById('id1').style.visibility="visible";
}
else
 document.getElementById('id1').style.visibility="hidden";
}
</script>
</head>
<body>
 
<input type="file" id="f1" name="file" onchange="checkFile();">
<input type="text" id="id1" name="txt2" value="Hello" style="visibility:hidden;">
</br>
</br>
 
<input type="text" id="t1" name="txt1" value="Hello 1" onchange="checkField();" >
 
<input type="text" id="id2" name="txt2" value="Hello 2" style="visibility:hidden;">
 
</body>
</html>

J'ai fait exactement pareil mais ça marche que dans un sens pour le type "file", cad, ne pas afficher le champs ne fonctionne pas.
Je ne comprend pas pourquoi ?

Citation:

Envoyé par Nico02

Dans se cas tu ne dois pas utiliser de variables serveur ça n'a aucun intérêt, continue sur du JS pur.

Par contre je peux t'assurer que ça marche aussi pour les <input type="file">

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
 
 
<html>
<head>
<script>
 
function checkField()
{
 
if( document.getElementById('t1').value != '' )
{
 document.getElementById('id2').style.visibility="visible";
}
else
 document.getElementById('id2').style.visibility="hidden";
}
 
 
function checkFile()
{
 
if( document.getElementById('f1').value != '' )
{
 document.getElementById('id1').style.visibility="visible";
}
else
 document.getElementById('id1').style.visibility="hidden";
}
</script>
</head>
<body>
 
<input type="file" id="f1" name="file" onchange="checkFile();">
<input type="text" id="id1" name="txt2" value="Hello" style="visibility:hidden;">
</br>
</br>
 
<input type="text" id="t1" name="txt1" value="Hello 1" onchange="checkField();" >
 
<input type="text" id="id2" name="txt2" value="Hello 2" style="visibility:hidden;">
 
</body>
</html>

08/01/2014, 15h12
SI_BDD

Nico02, Pour répondre à ton message, oui t'as raison, je n'avais pas fait attention que ma variable était côté java, j'ai repris un code existant, je suis partie trop vite dans le code, merci pour les conseils en tous les cas.

Citation:

Envoyé par Nico02

Tu peux très bien te passer du mot clé var il n'y a pas de soucis de se coté là.

Par contre @SI_BDD je pense que tu fais une grosse confusion dans ce que fais JSP.

Le code JSP d'une page s’exécute coté serveur et est donc exécute avant le code JavaScript qui lui est exécuté sur le poste client. Tu ne peux donc pas mêler tes variables comme tu le fais (en tout cas pas comme ça).

Comme je ne sais pas vraiment se que tu veux faire avec se code je ne peux t'aider plus que ça, mais je t'invite en tout cas à lire de la documentation sur JSP et l'interaction avec du javascript :)

Cdt.

C'est normal tu te bases sur la valeur du label associé à l'input file pour afficher/cacher le champ.

Par défaut le champ est caché car j'ai mis style="visibility:hidden;"

Ensuite je l'affiche si le label associé à l'input file est remplie, ce qui arrive quand tu sélectionnes un fichier.
Code:

1 2 3 4 if( document.getElementById('t1').value != '' ) { document.getElementById('id2').style.visibility="visible"; }
Mais comme on n'a pas possibilité de supprimer ce fichier (il faudrait prévoir un bouton pour ça) . Le label ne peut plus être vide, et donc tu ne pourras pas le cacher.
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 <!DOCTYPE html> <html> <head> <script> function checkField() { if( document.getElementById('t1').value != '' ) { document.getElementById('id2').style.visibility="visible"; } else document.getElementById('id2').style.visibility="hidden"; } function checkFile() { if( document.getElementById('f1').value != '' ) { document.getElementById('id1').style.visibility="visible"; } else document.getElementById('id1').style.visibility="hidden"; } function reset(){ document.getElementById('f1').value = ''; document.getElementById('id1').style.visibility="hidden"; } </script> </head> <body> <input type="file" id="f1" name="file" onchange="checkFile();"> <input type="button" id"b1" name="bouton" value="reset" onclick="reset();"> <input type="text" id="id1" name="txt2" value="Hello" style="visibility:hidden;"> </br> </br> <input type="text" id="t1" name="txt1" value="Hello 1" onchange="checkField();" > <input type="text" id="id2" name="txt2" value="Hello 2" style="visibility:hidden;"> </body> </html>
Ps: remplacer la valeur par vide est forcer le champ à se cacher n'est pas une vrai solution (c'est juste pour l'exemple) car tu ne fais que masquer le label associé. Pour des raison de sécurité le input file est très limité dans sont utilisation (pour éviter que l'on puisse accéder à la machine du client), et je ne connais pas de vrai solution pour faire ça (a moins de faire un reset sur le formulaire mais tu perds toutes les autres données aussi)

C'est plus clair pour moi, j'ai un bouton qui supprime le fichier sélectionné et c'est à travers ce bouton que j'en profite pour faire disparaitre le champs.
Et dés que je sélectionne un autre fichier, à travers la fonction JS, le champs apparait.

L'idée d'utiliser les "alert" m'a aidé à tester ce que je faisais.
Merci pour votre aide et conseils.

Cordialement
Citation:
Envoyé par Nico02
C'est normal tu te bases sur la valeur du label associé à l'input file pour afficher/cacher le champ.

Par défaut le champ est caché car j'ai mis style="visibility:hidden;"

Ensuite je l'affiche si le label associé à l'input file est remplie, ce qui arrive quand tu sélectionnes un fichier.
Code:

1 2 3 4 if( document.getElementById('t1').value != '' ) { document.getElementById('id2').style.visibility="visible"; }
Mais comme on n'a pas possibilité de supprimer ce fichier (il faudrait prévoir un bouton pour ça) . Le label ne peut plus être vide, et donc tu ne pourras pas le cacher.
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 <!DOCTYPE html> <html> <head> <script> function checkField() { if( document.getElementById('t1').value != '' ) { document.getElementById('id2').style.visibility="visible"; } else document.getElementById('id2').style.visibility="hidden"; } function checkFile() { if( document.getElementById('f1').value != '' ) { document.getElementById('id1').style.visibility="visible"; } else document.getElementById('id1').style.visibility="hidden"; } function reset(){ document.getElementById('f1').value = ''; document.getElementById('id1').style.visibility="hidden"; } </script> </head> <body> <input type="file" id="f1" name="file" onchange="checkFile();"> <input type="button" id"b1" name="bouton" value="reset" onclick="reset();"> <input type="text" id="id1" name="txt2" value="Hello" style="visibility:hidden;"> </br> </br> <input type="text" id="t1" name="txt1" value="Hello 1" onchange="checkField();" > <input type="text" id="id2" name="txt2" value="Hello 2" style="visibility:hidden;"> </body> </html>