Appel imbriqué de fonction dans onChange de SELECT

**toome** · 05/01/2006, 20h59

Bonjour à tout le monde,
Avant de poster cette question j'ai fait un long va-et-viens sur ce site et sur google, avec plein de test...je vous donne ma parole !!

j'ai un code javascript qui ouvre une popup, ce code est formé des chaines concaténées, la popup est affichée par un certain doc.write("string_de_la_page")
dans la popup j'ai une liste déroulante dont le code est :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
...
string d'avant
...
+
"<select name=\"select_annee\" id=100  "+ 
   "onChange=\"alert(javascript:valeur_liste(100));\">"
+
...
string d'après
...

la fonction valeur_liste(), et si ça peut aider qq'un, est une fonction qui retourne la valeur selectionnée dans la liste dont l'ID = 100 (j'ai fait expré de mettre une valeure numérique), voici le code :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
// retourner la valeur selectionnée dans une liste
function valeur_liste(idChamps) {
	var ValeurRetour = "";
  		for (i=0; i<document.getElementById(idChamps).length; i++){
		if(document.getElementById(idChamps).options[i].selected)  
		ValeurRetour = document.getElementById(idChamps).options[i].text;
		}
	return (ValeurRetour);
}

quand je prend le même code et je le mets dans une page à part ça marche ! (j'ai un mesage avec la valeur choisie dans la liste) , mais avec la popup ça marche pas ...!! j'ai testé le "window.opener.valeur_liste" mais ça marche pas non plus....

la popup est ouverte par ce code

Code :

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

 <a href="javascript:show(param1,param2);">

à l'interieur de la fonction "show", je veux réafficher la popup en fonction de la valeur retournée par valeure_liste() (donc en fonction du choix dans la liste existante dans la popup)

Code :

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

javascript:window.opener.show(param1,valeur_liste())

Help !!

**siddh** · 05/01/2006, 23h29

alors, on va commencer par ca :

Code :

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

1
2
3
4
5
// retourner la valeur selectionnée dans une liste
function valeur_liste(idChamps) {
      ValeurRetour = document.getElementById(idChamps).options[document.getElementById(idChamps).selectedIndex].text;
      return (ValeurRetour);
}

ensuite :

Code :

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

1
2
3
4
5
6
7
8
9
10
...
string d'avant
...
+
"<select name='select_annee' id='100'  "+
   "onChange='alert(valeur_liste(this.id));'>"
+
...
string d'après
...

[/code]

**toome** · 06/01/2006, 00h02

merci siddh !
pour ma fonction valeur_list() elle me servait aussi dans le cas où le choix est multiple (il y avait un séparateur de choix que j'ai négligé ici), mais dans le cas actuel je prendrai ta version.

pour le reste, je vais le tester et je te dirai.

**siddh** · 06/01/2006, 00h18

ok en cas de select multiple, garde ta boucle effectivement mais a ce moment la, met :

Code :

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

ValeurRetour += document.getElementById(idChamps).options[i].text;

pour concaténer tes resultats

**toome** · 06/01/2006, 10h22

j'ai remplacé par le code que tu m'a corrigé mais ça marche toujours pas

(en choisissant dans la liste j'ai pas le message d'alerte)...
ça me prend la tête cette histoir depuis des jours !!

**toome** · 06/01/2006, 11h28

la cosole JS dans Firefox montre une erreur de javascript " document.getElementById(idChamps) has no properties" déclarée dans la ligne

Code :

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

1
2
 
 ValeurRetour = document.getElementById(idChamps).options[document.getElementById(idChamps).selectedIndex].text;

**siddh** · 06/01/2006, 11h52

montre ton code pas découpé, doit y avoir une petite erreur de syntaxe

**toome** · 06/01/2006, 13h37

Ok, en fait, c'est un code de calendrier que j'ai reçu ici sur ce forum, je l'ai modifié pour avoir un truc dans le genre de :

En choisissant une année dans la liste, je veux que le calendrier se mets à jour à la date (jour courant / mois courant / année choisie dans la liste)
pour l'instant je me contente de récupérer l'année choisie dans la liste et l'afficher dans un message alert, si je réussi, je remplace alert par la fonction qui met à jour le calendrier :

Code :

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

1
2
3
4
 
// code à vérifier *********************
"<select name='select_annee' id='100'  " + "onChange=\"javascript:window.opener.show_calendar('"
 + str_target + "','01/06/" + valeur_liste(this.id)+"');\">" +

voici le code complet:

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
 
// début de script
function show_calendar(str_target, str_datetime) {
   var arr_months = ["Janvier", "F&eacute;vrier", "Mars", "Avril", "Mai", "Juin",
      "Juillet", "Ao&ucirc;t", "Septembre", "Octobre", "Novembre", "D&eacute;cembre"];
   var week_days = ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"];
   var n_weekstart = 1; // day week starts from (normally 0 or 1)
 
// Si la date est invalide : Initialisation avec la date du jour
	var test_date = /^(\d+)\/(\d+)\/(\d+)$/;
if (!test_date.exec(str_datetime)){
	var d = new Date();
	var str_datetime = d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear();
}
 
   // variable date
   var dt_datetime = (str_datetime == null || str_datetime =="" ?  new Date() : str2dt(str_datetime));
 
   var dt_prev_month = new Date(dt_datetime);
   dt_prev_month.setMonth(dt_datetime.getMonth()-1);
   var dt_next_month = new Date(dt_datetime);
   dt_next_month.setMonth(dt_datetime.getMonth()+1);
 
   var dt_prev_year = new Date(dt_datetime);
   dt_prev_year.setFullYear(dt_datetime.getFullYear()-1);
   var dt_next_year = new Date(dt_datetime);
   dt_next_year.setFullYear(dt_datetime.getFullYear()+1);
 
   var dt_firstday = new Date(dt_datetime);
   dt_firstday.setDate(1);
   dt_firstday.setDate(1-(7+dt_firstday.getDay()-n_weekstart)%7);
   var dt_lastday = new Date(dt_next_month);
   dt_lastday.setDate(0);
 
// lister les années 
function lister_annees() {
	var annees = "";
	var annee = "";
 
	for(i=40; i<100; i++) { 
			      if (i > 9){ 
				  annee = '<option value=19'+i+'>19'+i+'</option>';
				 			}
     			  if (i < 10){ 
				  annee = '<option value=190'+i+'>190'+i+'</option>';
 							}
 
			annees = annees + annee;
 			}
	return annees;
 }
 
   // html generation 
   // print calendar header
   var str_buffer = new String (
      "<html>\n"+
      "<head>\n"+
      " <title>Calendrier</title>\n"+
      "</head>\n"+
      "<body bgcolor=\"#99CC33\">\n"+
      "<table cellspacing=\"0\" border=\"0\" width=\"100%\">\n"+
      "<tr><td bgcolor=\"#4682B4\">\n"+
      "<table cellspacing=\"1\" cellpadding=\"3\" border=\"0\" width=\"100%\">\n"+
 
// Ligne Année précédente / suivante
      "<tr>\n <td bgcolor=\"blue\"><a href=\"javascript:window.opener.show_calendar('"+
      str_target+"', '"+ dt2dtstr(dt_prev_year)+"');\">"+
      "<img src=\"img\/prev.gif\" width=\"16\" height=\"16\" border=\"0\""+
      " alt=\"Ann&eacute;e pr&eacute;c&eacute;dente\"></a></td>\n"+
      " <td align=\"center\" bgcolor=\"blue\" colspan=\"5\">"+
      "<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"
      +" "+
//debut code à corriger ****************************
	   "<select name='select_annee' id='100'  " +
	   "onChange='alert(valeur_liste(this.id));'>" + 
		lister_annees() +
	    "</select>\n" + 
//fin code à corriger *******************************
 
	    "</font></td>\n" +
      "   <td bgcolor=\"blue\" align=\"right\"><a href=\"javascript:window.opener.show_calendar('"
      +str_target+"', '"+dt2dtstr(dt_next_year)+"');\">"+
      "<img src=\"img\/next.gif\" width=\"16\" height=\"16\" border=\"0\""+
 
      " alt=\"Ann&eacute;e suivante\"></a></td>\n</tr>\n"+
 
// Ligne Mois précédent / suivant
      "<tr>\n   <td bgcolor=\"#4682B4\"><a href=\"javascript:window.opener.show_calendar('"+
      str_target+"', '"+ dt2dtstr(dt_prev_month)+"');\">"+
      "<img src=\"img\/prev.gif\" width=\"16\" height=\"16\" border=\"0\""+
      " alt=\"Mois pr&eacute;c&eacute;dent\"></a></td>\n"+
      "   <td align=\"center\" bgcolor=\"#4682B4\" colspan=\"5\">"+
      "<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"
      +arr_months[dt_datetime.getMonth()]+" "+dt_datetime.getFullYear()+"</font></td>\n"+
      "   <td bgcolor=\"#4682B4\" align=\"right\"><a href=\"javascript:window.opener.show_calendar('"
      +str_target+"', '"+dt2dtstr(dt_next_month)+"');\">"+
      "<img src=\"img\/next.gif\" width=\"16\" height=\"16\" border=\"0\""+
      " alt=\"Mois suivant\"></a></td>\n</tr>\n"
 
   );
 
 
   var dt_current_day = new Date(dt_firstday);
   // print weekdays titles
   str_buffer += "<tr>\n";
   for (var n=0; n<7; n++)
      str_buffer += "   <td bgcolor=\"#87CEFA\">"+
      "<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"+
      week_days[(n_weekstart+n)%7]+"</font></td>\n";
   // print calendar table
   str_buffer += "</tr>\n";
   while (dt_current_day.getMonth() == dt_datetime.getMonth() ||
      dt_current_day.getMonth() == dt_firstday.getMonth()) {
      // print row heder
      str_buffer += "<tr>\n";
      for (var n_current_wday=0; n_current_wday<7; n_current_wday++) {
            if (dt_current_day.getDate() == dt_datetime.getDate() &&
               dt_current_day.getMonth() == dt_datetime.getMonth())
               // print current date
               str_buffer += "   <td bgcolor=\"#FFB6C1\" align=\"right\">";
            else if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6)
               // weekend days
               str_buffer += "   <td bgcolor=\"#DBEAF5\" align=\"right\">";
            else
               // print working days of current month
               str_buffer += "   <td bgcolor=\"white\" align=\"right\">";
 
            if (dt_current_day.getMonth() == dt_datetime.getMonth())
               // print days of current month
               str_buffer += "<a href=\"javascript:window.opener."+str_target+
               ".value='"+dt2dtstr(dt_current_day)+"'; window.close();\">"+
 
               "<font color=\"black\" face=\"tahoma, verdana\" size=\"2\">";
            else
               // print days of other months
               str_buffer += "<font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">";
            str_buffer += dt_current_day.getDate()+"</font></a></td>\n";
            dt_current_day.setDate(dt_current_day.getDate()+1);
      }
      // print row footer
      str_buffer += "</tr>\n";
   }
   // print calendar footer
   //str_buffer += "<form name='cal'>\n<tr><td colspan='7' bgcolor='#87CEFA'>"+
   str_buffer += "<tr><td colspan='7' bgcolor='#87CEFA'>"+
      "</tr>\n</td>\n</table>\n" +
      "</body>\n" +
      "</html>\n";
 
   var vWinCal = window.open("", "Calendar","width=200,height=235,top=500,left=700");
 
   vWinCal.opener = self;
   var calc_doc = vWinCal.document;
   calc_doc.write (str_buffer);
   calc_doc.close();
}
// datetime parsing and formatting routimes. possible de le modifier
function str2dt (str_datetime) {
 
   var re_date = /^(\d+)\/(\d+)\/(\d+)$/;
   if (!re_date.exec(str_datetime))
      return alert("Invalid Datetime format: "+ str_datetime);
   return (new Date (RegExp.$3, RegExp.$2-1, RegExp.$1, RegExp.$4, RegExp.$5, RegExp.$6));
}
function dt2dtstr (dt_datetime) {
return (new String (
         dt_datetime.getDate()+"/"+(dt_datetime.getMonth()+1)+"/"+dt_datetime.getFullYear()));
}
function dt2tmstr (dt_datetime) {
  return (new String (
         dt_datetime.getHours()+":"+dt_datetime.getMinutes()+":"+dt_datetime.getSeconds()));
} 
 
 
// retourner la valeur selectionnée dans une liste
function valeur_liste(idChamps) {
 ValeurRetour = document.getElementById(idChamps).options[document.getElementById(idChamps).selectedIndex].text;
  return (ValeurRetour);
}
 
// fin de script

mon code d'appel est le suivant:

Code :

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

1
2
3
4
5
 
<form name="form_date" id="form_date" method="post" action="" onSubmit ="return confirm('Voulez-vous continuer?');">
  <input type="text" name="date_naissance" value="" readonly= "yes" size="10" maxlength="10" />
  <a href="javascript:show_calendar('document.form_date.date_naissance', document.form_date.date_naissance.value);"><img src="img/Calendar.gif" width="16" height="16" border="0" alt="Cliquez pour voir le calendrier" /></a>
</form>

merci bien d'avance

**siddh** · 06/01/2006, 13h55

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var str_buffer = new String (
      "<html>\n"+
      "<head>\n"+
      " <title>Calendrier</title>\n"+
      "<script>\n"+
      "// retourner la valeur selectionnée dans une liste\n"+
      "function valeur_liste(idChamps) {\n"+
      " ValeurRetour = document.getElementById(idChamps).options[document.getElementById(idChamps).selectedIndex].text;\n"+
      "return ValeurRetour;\n"+
      "	}\n"+
      "<\/script>"+
      "</head>\n"+

car ton valeur_liste etait dans le opener et non dans ta popup

**toome** · 06/01/2006, 14h40

waw !! ...c'es génial !! mais tu m'as encore rien dit sur le code que je vais remplacer

Code :

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

1
2
3
 
"<select name='select_annee' id='100' " +
  "onChange=\"javascript:window.opener.show_calendar('" + str_target +"','01/06/" +  valeur_liste(this.id) + "');\">"

je l'ai mis mais ça marche pas, la fonction show_calendar est bien dans le opener...mais là ça doit être un truc que seuls les génies JS peuvent décrypter

**siddh** · 06/01/2006, 14h56

Code :

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

1
2
3
4
5
6
//debut code à corriger ******************
      "<select name='select_annee' id='100' " +
  "onChange=\"window.opener.show_calendar('" + str_target +"','01/06/'+valeur_liste(this.id));\">" +
      lister_annees() +
       "</select>\n" +
//fin code à corriger *********************

en fait il faut que l'appel a valeur_liste soit ecris dans le source de ta popup

**toome** · 06/01/2006, 15h07

wooooooooooooooooooooooooooow !!
grand merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii !!

ça marche !

et au passage, grand merci aussi à celui qui m'a filé le code d'orgine: "pc75"

j'ai pas bien pigé "soit ecris dans le source de ta popup" mais bon...enfin je devine que ça dépend par quelle fonction le navigateur va commencer son intérpréation : show_calendar ou valeur_list

**toome** · 06/01/2006, 15h25

ok je vois...en fait je dois laisser la fonction "s'intérprétée" au moment de l'évaluation des paramétres de show_calendar.... 8)

vraiment c'est très sympa de ta part "siddh"....rien à dire....un grand forum avec des grans hommes/femmes....

ça m'a donné l'envie de continuer avec le JS quoi que l'on dise

Appel imbriqué de fonction dans onChange de SELECT

JavaScript

Discussions similaires

Partager

Partager