Ma premiere page JSP

**Joratois** · 20/12/2008, 23h11

Bonsoir,

J'ai écrit ma première page JSP et ça donne ceci :

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
<!DOCTYPE HTML PUBliC "-//W3C/DTD HTML 4.0 Transitional//EN">
<html>
<head>
<META HTTP-EQUIV = "Pragma" CONTENT="no-cache">
		<title>Données de base</title>
<script>
function valueDate(formulaire,valAn,valMoi) {
var valAnnee=valAn.value;
var valMois=valMoi.value;
alert(valAnnee + ' ' + valMois);
 
        }
        
 
</script>
 
<link href="style.css" type="text/css" rel="stylesheet" >
</head>
<body>
<FORM name="formlist" ACTION="" METHOD="">
<table border="0" width="100%">
  <tr>
    <td width="50%">
		<h3>Annee<img width="10" height="1" src="../Images/rien.gif">
		<select name="j_annee" onChange="valueDate('formlist','j_annee','j_mois')">
		<option value="0"></option>
		<option value="2000">2000</option>
		<option value="2001">2001</option>
		<option value="2002">2002</option>
		<option value="2003">2003</option>
		<option value="2004">2004</option>
		<option value="2005">2005</option>
		<option value="2006">2006</option>
		<option value="2007">2007</option>
		<option value="2008">2008</option>
		<option value="2009">2009</option>
		<option value="2010">2010</option>
		</select></h3>
	</td>
    <td width="50%">
		<h3>Mois<img width="10" height="1" src="../Images/rien.gif">
		<select name="prestmois" onChange="valueDate('formlist','j_annee','j_mois')">
		<option value="0"></option>
		<option value="1">Janvier</option>
		<option value="2">Fevrier</option>
		<option value="3">Mars</option>
		<option value="4">Avril</option>
		<option value="5">Mai</option>
		<option value="6">Juin</option>
		<option value="7">Juillet</option>
		<option value="8">Aout</option>
		<option value="9">Septembre</option>
		<option value="10">Octobre</option>
		<option value="11">Novembre</option>
		<option value="12">Decembre</option>
		</select>
		</h3>
	</td>
  </tr>
</table>
</form>
</body>
</html>

Je désire effectuer un traitement basé sur une période démarrant le premier jour d'un mois choisi par un utilisateur.
Pour progammer cette date de départ, je désire utiliser deux listes SELECT, une avec les années, l'autre avec les mois.

J'ai créé ces deux listes et j'essaie maintenant de lire les choix effectués.
Pour voir si j'arrive à lire l'année et le mois, j'ai créé une fonction qui ne contient pour le moment qu'un alert() ou je voudrais afficher l'année et le numéro du mois.

Hélas, la boite n'affiche que deux fois l'indication "undefined undefined"

Quelle erreur ai-je commise ?

Mon environnement est :
Eclipse Platform Version: 3.4.0 Build id: I20080617-2000
Server Tomcat 6.0

Merci de l'aide et bonne soirée

**guigui5931** · 21/12/2008, 12h10

Oula il va falloir voir les bases du javascript. Tu trouvera pas mal de tutoriels sur ce site.
En gros il faut déja que tu récupère l'objet correspondant à ton select

Code :

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

1
2
 
document.getElementById('idDuSelect')

puis que tu récupère l'option sélectionnée

Code :

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

1
2
 
document.getElementById('idDuSelect').options[document.getElementById('idDuSelect').selectedIndex].value

Tu trouvera des exemple dans la FAQ.

**Joratois** · 21/12/2008, 18h23

Envoyé par guigui5931

Oula il va falloir voir les bases du javascript. Tu trouvera pas mal de tutoriels sur ce site.

Bonsoir et merci pour le diagnostic !

Je vais lire les tutoriels et je reviendrai plus tard.

Je place mon message pour le moment sur résolu...

**Joratois** · 02/01/2009, 22h41

Voilà-voilà...

J'ai lu quelques tutoriels et j'ai modifié comme suit mon code:

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
 
<!DOCTYPE HTML PUBliC "-//W3C/DTD HTML 4.0 Transitional//EN">
<html>
<head>
<META HTTP-EQUIV = "Pragma" CONTENT="no-cache">
		<title>Agenda</title>
<script>
function valueDate() {
var anValue = document.getElementById('jsannee').value;
var moiValue = document.getElementById('jsmois').value;
//alert(anValue + ' ' + moiValue);
 
        if ( anValue > 0 && moiValue < 99 ) {
        var dateValue = new Date(anValue, moiValue, 1);
        document.getElementById('dateval').value = dateValue;
        document.getElementById('datevaljour').value = dateValue.getDate();
        document.getElementById('datevalmois').value = dateValue.getMonth();
        document.getElementById('datevalan').value = dateValue.getFullYear();
        }
}
 
</script>
 
<link href="style.css" type="text/css" rel="stylesheet" >
</head>
<body>
<FORM name="formlist" ACTION="" METHOD="">
<table border="0" width="100%">
  <tr>
    <td width="50%">
		Annee
		<select name="jsannee" onChange="valueDate()">
		<option value="0"></option>
		<option value="2006">2006</option>
		<option value="2007">2007</option>
		<option value="2008">2008</option>
		<option value="2009">2009</option>
		<option value="2010">2010</option>
		</select>
	</td>
    <td width="50%">
		Mois
		<select name="jsmois" onChange="valueDate()">
		<option value="99"></option>
		<option value="0">Janvier</option>
		<option value="1">Fevrier</option>
		<option value="2">Mars</option>
		<option value="3">Avril</option>
		<option value="4">Mai</option>
		<option value="5">Juin</option>
		<option value="6">Juillet</option>
		<option value="7">Aout</option>
		<option value="8">Septembre</option>
		<option value="9">Octobre</option>
		<option value="10">Novembre</option>
		<option value="11">Decembre</option>
		</select>
	</td>
  </tr>
  <tr>
    <td width="100%" colspan="2">
	Champs de controle pour voir si tout marche bien<br>
		Timestamp<input type="text" name="dateval" size="50">
		jour<input type="text" name="datevaljour" size="4">
		mois<input type="text" name="datevalmois" size="4">
		annee<input type="text" name="datevalan" size="8">
	</td>
  </tr>
</table>
<table border="0" width="100%">
  <tr>
    <td width="100%">
 
Ici une table des éléments lus dans la base de données
	</td>
  </tr>
</table>
 
</form>
</body>
</html>

Effectivement, avec getElementById, c'est beaucoup plus simple !

Maintenant, malgré mes recherches, je n'ai pas trouvé la réponse à la question suivante:
- après avoir sélectionné un mois et une année, je désire lire dans une base de données MySQL les éléments d'agenda du mois désiré et afficher le résultat dans un tableau situé juste en dessous des listes de sélection dans la même page.

Je n'ai pas de problème pour sélectionner dans MySQL par contre, je ne sais pas comment appeler la fonction qui va rédiger le tableau...

Bonne soirée et bonne année 2009 !

**Joratois** · 03/01/2009, 00h10

Pour préciser, mon idée était d'écrire la boucle d'écriture du tableau et, après avoir séélectionné les mois et année, faire un reload pour provoquer la lecture de la requête avec les paramètres requis mais un reload efface la sélection...

**Fench** · 05/01/2009, 09h30

Bonjour et bonne année 2009 aussi,

En jsp avec du jvascript comme ton code tu ne peux pas afficher ton tableau directement car il ne faut pas oublier la notion client/serveur.

Soit tu repasses par une servlet (serveur) pour réafficher ta page jsp avec les valeurs mois et année qui ont été sélectionnés.

Soit c de l'AJAX qui est aussi du javascript mais qui permet de communiquer avec le serveur.

Et puis avec un reload c normal que tu perds l'affichage des select

Pour la première solution, tu peux passer par une servlet, cette dernière récuppérant les valeurs de tes deux sélect PUIS cette dernière réaffiche ta jsp en renvoyant les valeurs ET dans ta jsp:

au niveau des selects si il existe déjà une valeur sélectionnée, tu fais sélected comme

Code :

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

1
2
3
4
5
 
                 <option value="2006" 
                                            <% if( (annéeChoisie != null) && (Integer.parseInt(annéeChoisi) == "2006") ){ %> selected <% } %>
                                            >2006
                   </option>

Comme cela tu garderas tes valeurs sélectionnées

Ma premiere page JSP

Servlets/JSP Java

Vue hybride

Discussions similaires

Partager

Partager