Afficher valeurs de listes déroulantes dans zone de texte

**Linea26** · 10/12/2012, 12h24

Bonjour à tous, voici mon soucis :
Je souhaite grâce à plusieurs listes déroulantes afficher les valeurs de ces listes dans une zone de texte. Et par la suite faire un envoi mail (Mais j'en suis pas là).
J'arrive a faire afficher la première liste déroulante mais pas les suivantes.

Et je voudrais aussi mettre au tout début du formulaire deux boutons radio :
- Le 1er bouton affiche les listes déroulante
- Le 2nd bouton radio envoie vers mon site.
Mais là non plus ca ne marche pas.

Voici mon script.

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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<HTML>
<HEAD>
<TITLE>Prix impressions pour 50 livres</TITLE>
 
<SCRIPT LANGUAGE = "JavaScript">
 
function GereControle(Controleur, Controle, Masquer) {
var objControleur = document.getElementById(Controleur);
var objControle = document.getElementById(Controle);
	if (Masquer=='1')
		objControle.style.visibility=(objControleur.checked==true)?'visible':'hidden';
	else
		objControle.disabled=(objControleur.checked==true)?false:true;
	return true;
}
</script>
 
<form>
<input type="radio" id="radio_10" name="radios_0" onClick="GereControle('radio_10', 'livres', '1');"  CHECKED>&nbsp;<label for="radio_10">Livre type</label>
<br />
<input type="radio" id="radio_20" name="radios_0" onClick="GereControle('radio_10', 'livres', '1');"location.href='http://www.imeaf.com/commande/devis-livres-wiro';>&nbsp;<label for="radio_20">Livre personnalise</label>
<>
<form>
<SCRIPT LANGUAGE="JavaScript">
 
 
 
function MakeArray(n) {
	this.length = n
	for (var i = 1; i <= n; i++) {
		this[i] = 0
	}
	return this
}
 
function livre(nbrpages,quantite, prix){
	this.nbrpages = nbrpages
	this.quantite = quantite
	this.prix = prix
 
}
function format(quelformat){
	this.quelformat = quelformat
 
 
}
function Papinterieur(quelpapierint){
	this.quelpapierint = quelpapierint
 
 
}
function Papcouverture(quelpapiercv,quelpelliculagecv){
	this.quelpapiercv = quelpapiercv
	this.quelpelliculagecv = quelpelliculagecv
 
 
}
 
pgslivre = new MakeArray(25)
pgslivre[1] = new livre("48 pages","50 exemplaires", "235 euros HT")
pgslivre[2] = new livre("64 pages","50 exemplaires", "246 euros HT")
pgslivre[3] = new livre("80 pages","50 exemplaires", "259 euros HT")
pgslivre[4] = new livre("96 pages","50 exemplaires", "273 euros HT")
pgslivre[5] = new livre("100 pages","50 exemplaires", "274 euros HT")
pgslivre[6] = new livre("112 pages","50 exemplaires", "285 euros HT")
pgslivre[7] = new livre("128 pages","50 exemplaires", "299 euros HT")
pgslivre[8] = new livre("144 pages","50 exemplaires", "315 euros HT")
pgslivre[9] = new livre("150 pages","50 exemplaires", "320 euros HT")
pgslivre[10] = new livre("160 pages","50 exemplaires", "329 euros HT")
pgslivre[11] = new livre("176 pages","50 exemplaires", "344 euros HT")
pgslivre[12] = new livre("192 pages","50 exemplaires", "358 euros HT")
pgslivre[13] = new livre("208 pages","50 exemplaires", "366 euros HT")
pgslivre[14] = new livre("224 pages","50 exemplaires", "380 euros HT")
pgslivre[15] = new livre("240 pages","50 exemplaires", "394 euros HT")
pgslivre[16] = new livre("256 pages","50 exemplaires", "408 euros HT")
pgslivre[17] = new livre("272 pages","50 exemplaires", "424 euros HT")
pgslivre[18] = new livre("288 pages","50 exemplaires", "438 euros HT")
pgslivre[19] = new livre("304 pages","50 exemplaires", "446 euros HT")
pgslivre[20] = new livre("320 pages","50 exemplaires", "458 euros HT")
pgslivre[21] = new livre("336 pages","50 exemplaires", "472 euros HT")
pgslivre[22] = new livre("352 pages","50 exemplaires", "485 euros HT")
pgslivre[23] = new livre("368 pages","50 exemplaires", "499 euros HT")
pgslivre[24] = new livre("384 pages","50 exemplaires", "513 euros HT")
pgslivre[25] = new livre("400 pages","50 exemplaires", "528 euros HT")
 
unformat = new MakeArray(4)
unformat[1] = new format("21x29,7")
unformat[2] = new format("12x18")
unformat[3] = new format("14,8x21")
unformat[4] = new format("15,5x22,5")
 
unpapint = new MakeArray(1)
unpapint[1] = new Papinterieur("clairbook 80g")
 
unpapcv = new MakeArray(1)
unpapcv[1] = new Papcouverture("en 220g","avec pelliculage brillant")
 
function showData(form) {
	i = form.livres.selectedIndex + 1
	i = form.formats.selectedIndex + 1
	var result = "Votre livre en " + pgslivre[i].nbrpages
	result += " sera imprimé en " + pgslivre[i].quantite + ".\r\n"
	result1 += " sur un format  " + unformat[i].quelformat + ".\r\n"
	result2 += " pour un prix de " + pgslivre[i].prix
	form.output.value = result
}
 
 
 
</SCRIPT>
<BODY>
<H1>Prix pour 50 livres</H1>
<HR>
<FORM>
<SCRIPT LANGUAGE = "JavaScript">
 
 
var page = "" 
page += "Choisissez un nombre de pages noir pour afficher le prix: "
page += "<SELECT NAME='livres'> "
// construit la liste déroulante à partir du tableau
for (var i = 1; i <= pgslivre.length; i++) {
	page += "<OPTION" 
	if (i == 1) { 
		page += " SELECTED"
	}
	page += ">" + pgslivre[i].nbrpages
}
page += "</SELECT><P>" 
document.write(page) 
 
</SCRIPT>
 
 
<SCRIPT LANGUAGE = "JavaScript">
 
 
var page = "" 
page += "Choisissez le format "
page += "<SELECT NAME='formats'> "
 
for (var i = 1; i <= unformat.length; i++) {
	page += "<OPTION" 
	if (i == 1) {
		page += " SELECTED"
	}
	page += ">" + unformat[i].quelformat
}
page += "</SELECT><P>" 
document.write(page) 
 
</SCRIPT>
 
<SCRIPT LANGUAGE = "JavaScript">
 
 
var page = "" 
page += "Choisissez papier interieur "
page += "<SELECT NAME='papints'> "
 
 for (var i = 1; i <= unpapint.length; i++) {
	page += "<OPTION" // OPTION tags
	if (i == 1) { 
		page += " SELECTED"
	}
	page += ">" + unpapint[i].quelpapierint
}
page += "</SELECT><P>" 
document.write(page) 
 
</SCRIPT>
 
<SCRIPT LANGUAGE = "JavaScript">
 
 
var page = "" 
page += "Choisissez papier de couverture "
page += "<SELECT NAME='papcvs'> "
 
for (var i = 1; i <= unpapcv.length; i++) {
	page += "<OPTION" // OPTION tags
	if (i == 1) { 
		page += " SELECTED"
	}
	page += ">" + unpapcv[i].quelpapiercv
}
page += "</SELECT><P>" 
document.write(page) 
 
</SCRIPT>
 
</head>
 
<body>
 
 
 
<INPUT TYPE="button" NAME="showdata" VALUE="Afficher informations" onClick="showData(this.form)"><P>
<TEXTAREA NAME="output" ROWS=5 COLS=67>
</TEXTAREA>
</FORM>
</BODY>
</HTML>

Pouvez vous m'aider SVP

**Linea26** · 11/12/2012, 08h16

Peut être que je ne suis pas très clair dans mes explications.
Ou alors mon code est tellement pourri que personne ne veux y mettre le nez...

En fait je voudrais que quand les internautes arrivent sur la page, ils choisissent différentes options dans les listes déroulantes et qu'elles s'affichent dans la zone de texte.

S'il vous plait, un petit coup de main ?

**SylvainPV** · 11/12/2012, 11h06

Bonjour,

Tout d'abord tu construis l'intégralité de ta page avec des document.write(), ce qui est loin d'être l'idéal ! Il vaut mieux partir d'un HTML de base en dur dans un fichier .html et faire en sorte que ton Javascript aille manipuler le DOM, et non le générer.

Dans showDataForm, tu utilises result1 et result2 qui ne sont définis nulle part. Inversement tu utilises deux fois la variable i ! Voilà le code réécrit :

Code :

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

1
2
3
4
5
6
 
function showData(form) {
   var livre = pgslivre[form.livres.selectedIndex + 1];
   var format = unformat[form.formats.selectedIndex + 1].quelformat;
    form.output.value = "Votre livre en " + livre.nbrpages + " sera imprimé en " + livre.quantite + ".\r\n" +  " sur un format  " + format + ".\r\n" + " pour un prix de " + livre.prix;
}

Il faudra aussi consolider ce script pour gérer les éventuelles erreurs (index en dehors du tableau, info manquante etc...)

Et je voudrais aussi mettre au tout début du formulaire deux boutons radio :
- Le 1er bouton affiche les listes déroulante
- Le 2nd bouton radio envoie vers mon site.

Des boutons radio vraiment ? Les simili-checkboxes rondes ? Ce serait plutôt deux boutons classiques (type="button") qu'il te faudrait.

**Linea26** · 12/12/2012, 09h59

Bonjour SylvainPV, j'ai suivi tes conseils pour la function showData(form). Et ca marche. Merci

Du coup j'ai voulu séparer le JS et le HTML, mais je ne sais pas trop comment m'y prendre. Et forcément ça ne fonctionne pas.

Voici ce que j'ai fait pour le moment :
JS :

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
// JavaScript Document
 
<SCRIPT LANGUAGE="JavaScript">
 
function MakeArray(n) {
	this.length = n
	for (var i = 1; i <= n; i++) {
		this[i] = 0
	}
	return this
}
 
function livre(nbrpages,quantite, prix){
	this.nbrpages = nbrpages
	this.quantite = quantite
	this.prix = prix
 
}
function format(quelformat){
	this.quelformat = quelformat
 
 
}
function Papinterieur(quelpapierint){
	this.quelpapierint = quelpapierint
 
 
}
function Papcouverture(quelpapiercv,quelpelliculagecv){
	this.quelpapiercv = quelpapiercv
	this.quelpelliculagecv = quelpelliculagecv
 
 
}
 
pgslivre = new MakeArray(25)
pgslivre[1] = new livre("48 pages","50 exemplaires", "235 euros HT")
pgslivre[2] = new livre("64 pages","50 exemplaires", "246 euros HT")
pgslivre[3] = new livre("80 pages","50 exemplaires", "259 euros HT")
pgslivre[4] = new livre("96 pages","50 exemplaires", "273 euros HT")
pgslivre[5] = new livre("100 pages","50 exemplaires", "274 euros HT")
pgslivre[6] = new livre("112 pages","50 exemplaires", "285 euros HT")
pgslivre[7] = new livre("128 pages","50 exemplaires", "299 euros HT")
pgslivre[8] = new livre("144 pages","50 exemplaires", "315 euros HT")
pgslivre[9] = new livre("150 pages","50 exemplaires", "320 euros HT")
pgslivre[10] = new livre("160 pages","50 exemplaires", "329 euros HT")
pgslivre[11] = new livre("176 pages","50 exemplaires", "344 euros HT")
pgslivre[12] = new livre("192 pages","50 exemplaires", "358 euros HT")
pgslivre[13] = new livre("208 pages","50 exemplaires", "366 euros HT")
pgslivre[14] = new livre("224 pages","50 exemplaires", "380 euros HT")
pgslivre[15] = new livre("240 pages","50 exemplaires", "394 euros HT")
pgslivre[16] = new livre("256 pages","50 exemplaires", "408 euros HT")
pgslivre[17] = new livre("272 pages","50 exemplaires", "424 euros HT")
pgslivre[18] = new livre("288 pages","50 exemplaires", "438 euros HT")
pgslivre[19] = new livre("304 pages","50 exemplaires", "446 euros HT")
pgslivre[20] = new livre("320 pages","50 exemplaires", "458 euros HT")
pgslivre[21] = new livre("336 pages","50 exemplaires", "472 euros HT")
pgslivre[22] = new livre("352 pages","50 exemplaires", "485 euros HT")
pgslivre[23] = new livre("368 pages","50 exemplaires", "499 euros HT")
pgslivre[24] = new livre("384 pages","50 exemplaires", "513 euros HT")
pgslivre[25] = new livre("400 pages","50 exemplaires", "528 euros HT")
 
unformat = new MakeArray(4)
unformat[1] = new format("21x29,7")
unformat[2] = new format("12x18")
unformat[3] = new format("14,8x21")
unformat[4] = new format("15,5x22,5")
 
unpapint = new MakeArray(1)
unpapint[1] = new Papinterieur("clairbook 80g")
 
unpapcv = new MakeArray(1)
unpapcv[1] = new Papcouverture("en 220g"," avec pelliculage brillant")
 
function showData(form) {
   var livre = pgslivre[form.livres.selectedIndex + 1];
   var format = unformat[form.formats.selectedIndex + 1].quelformat;
   var Papinterieur = unpapint[form.papints.selectedIndex + 1].quelpapierint; 
   var Papcouverture = unpapcv[form.papcvs.selectedIndex + 1]; 
    form.output.value = "Votre livre en " + livre.nbrpages + " sera imprime en " + livre.quantite + ".\r\n" +  " Sur un format " + format + " avec un papier interieur en " + Papinterieur + " et un papier de couveture " + Papcouverture.quelpapiercv + Papcouverture.quelpelliculagecv + ".\r\n" + "pour un prix de " + livre.prix;
}
 
var page = "" 
page += "Choisissez un nombre de pages noir pour afficher le prix: "
page += "<SELECT NAME='livres'> "
 
for (var i = 1; i <= pgslivre.length; i++) {
	page += "<OPTION"
	if (i == 1) { 
		page += " SELECTED"
	}
	page += ">" + pgslivre[i].nbrpages
}
page += "</SELECT><P>" 
 
 
var page = "" 
page += "Choisissez le format "
page += "<SELECT NAME='formats'> "
 
for (var i = 1; i <= unformat.length; i++) {
	page += "<OPTION" 
	if (i == 1) { 
		page += " SELECTED"
	}
	page += ">" + unformat[i].quelformat
}
page += "</SELECT><P>" 
 
 
 
var page = "" 
page += "Choisissez papier interieur "
page += "<SELECT NAME='papints'> "
 
for (var i = 1; i <= unpapint.length; i++) {
	page += "<OPTION" 
	if (i == 1) { 
		page += " SELECTED"
	}
	page += ">" + unpapint[i].quelpapierint
}
page += "</SELECT><P>" 
 
 
var page = "" 
page += "Choisissez papier de couverture "
page += "<SELECT NAME='papcvs'> "
 
for (var i = 1; i <= unpapcv.length; i++) {
	page += "<OPTION" 
	if (i == 1) { 
		page += " SELECTED"
	}
	page += ">" + unpapcv[i].quelpapiercv
}
page += "</SELECT><P>" 
 
</SCRIPT>

Fichier HTML

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tarifs impression de livre</title>
</head>
 
<body>
<script src="fichier.js" type="text/javascript"></script>
 
<H1>Prix impressions pour 50 livres</H1>
<HR>
<FORM>
 
<select name = "livres" id = "pgslivre">
 
    <option value = "">Nombre de pages noir R/V</option>
    <option value = "48">48</option>
    <option value = "64">64</option>
    <option value = "80">80</option>
    <option value = "96">96</option>
 
</select>
<BR></BR>
<select name = "formats" id = "unformat">
 
    <option value = "">Choisissez le format</option>
    <option value = "format">12x18</option>
    <option value = "format">15,5x22x5</option>
 
</select>
<BR>
<label for="unpapint">Papier interieur - ClairBook 80g</label>
<input type="radio" id = "unpapint" name = "papints" value = "Papinterieur" class = "Papinterieur"/>
</BR>
<BR>
<label for="unpapcv">Papier couverture - Chromocard 220g + Pelliculage Brillant</label>
<input type="radio" id = "unpapcv" name = "papcvs" value = "Papcouverture" class = "Papcouverture"/>
</BR>                    
 
<INPUT TYPE="button" NAME="showdata" VALUE="Afficher informations" onClick="showData(this.form)"><P>
<TEXTAREA NAME="output" ROWS=5 COLS=67>
</TEXTAREA>
</FORM>
 
</body>
</html>