Archivlink: javarea.de Forum > JavaScript > Greenhorn benötigt bitte dringend Hilfe
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Greenhorn benötigt bitte dringend Hilfe
Pages: [1]
| geschrieben von klape am 29.05.2006 - 22:30 |
Hallo miteinander,
ich bin gerade dabei, für die Frau meines besten Freundes ne Webseite mit einem kleinen Webstore zu basteln. Es gibt ja auch die fertigen Bestellformulare, bei denen allerdings das Problem besteht, daß weder Teilsummen, noch Summen, geschweige denn wahloptionen wie Nachnahme/überweisung angeboten werden.
jetzt hab ich mal versucht sowas in ganz kleiner Form selbst darzustellen, aber mein script rechnet ja nichtmal die erste teilsumme, bzw. ich denke rechnen tut es schon, aber es wird kein ergebnis angezeit.
Vielleicht kann ja der eine oder andere mal schnell über das script drüberschauen und kurz "den ROT-, bzw. ERGÄNZUNGSSTIFT" ansetzen.
kurz die rechenprozeduren, wie ich es mir vorstelle.
preis 1 * anz 1 = TS1 (preis 1 =fix)
preis 2 * anz 2 = TS2 (preis 2 =fix)
dann wird ausgewählt zwischen NN/VK und bei NN/VK je nach Wahl TS1+TS2+4.90, bzw. TS1+TS2+7.50 angezeigt.
Klingt zwar recht einfach und ist es wahrscheinlich auch, aber ich beiß mir seit 3 Tagen die Zähne dran aus.
Bitte, bitte um Hilfe
Kla(us-)Pe(ter)
<html>
<head>
<title>Summenbeispiel</title>
<script language="JavaScript">
<!--
function changed(obj) {
var anz1;
var anz2;
var preis1;
var preis2;
var ts1 = anz1 * preis1;
var ts2 = anz2 * preis2;
var totall = ts1 + ts2;
var nn;
var vk;
var totalnn = totall + nn;
var totalvk = totall + vk;
}
document.kontakt.ts1.value=ts1;
document.kontakt.ts1.value=ts2;
document.kontakt.totalnn.value=totalnn;
document.kontakt.totalvk.value=totalvk;
document.kontakt.totall.value=totall;
}
//-->
</script>
</head>
<body style="">
<br>
<form name="kontakt"> <br>
<br>
<table style="width: 368px; height: 175px;" cellpadding="2"
cellspacing="0">
<tbody>
<tr>
<td
style="font-family: helvetica,arial,sans-serif; font-weight: bold; color: rgb(14, 31, 109); text-align: left;">Anzahl</td>
<td
style="font-family: helvetica,arial,sans-serif; font-weight: bold; color: rgb(14, 31, 109); text-align: left;">
<select class="text" name="anz1" onchange="changed(this);">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<a> * </a> <input name="preis1" size="6" value="5.90"
readonly="readonly" type="text"> </td>
<td><input value="0" name="ts1" size="7"
onchange="changed(this);" align="right"><a> (TS1)</a></td>
</tr>
<tr>
<td
style="font-family: helvetica,arial,sans-serif; font-weight: bold; color: rgb(14, 31, 109); text-align: left;">Anzahl</td>
<td
style="font-family: helvetica,arial,sans-serif; font-weight: bold; color: rgb(14, 31, 109); text-align: left;">
<select class="text" name="anz2" onchange="changed(this);">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<a> * </a> <input name="preis2" size="6" value="9.80"
readonly="readonly" type="text"> </td>
<td><input value="0" name="ts2" size="7"
onchange="changed(this);" align="right"><a> (TS2)</a></td>
</tr>
<tr>
<td colspan="2" rowspan="1"
style="width: 90px; color: rgb(255, 0, 0); text-align: center;"> <a><font
size="2"><input name="Zahlmethode" value="Post" checked="checked"
type="radio"> per Nachnahme </font></a><br>
</td>
<td><input value="7.50" name="nn" size="7"
onchange="changed(this);" align="right"><a> (NN)</a></td>
</tr>
<tr>
<td colspan="2" rowspan="1"
style="width: 90px; color: rgb(255, 0, 0); text-align: center;"> <a><font
size="2"><input name="Zahlmethode" value="Bank" type="radio">
per
Überweisung <br>
(Vorauskasse)</font></a></td>
<td><input value="4.90" name="vk" size="7"
onchange="changed(this);" align="right"><a> (VK)</a></td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
<td style="vertical-align: top;"><br>
</td>
<td><input value="0" name="ts2" size="7"
onchange="changed(this);" align="right"><a> (NNoderVK)</a></td>
</tr>
</tbody>
</table>
<br>
<br>
</form>
</body>
</html>
|
| geschrieben von René am 30.05.2006 - 11:16 |
| HTML-Quelltext | 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:
| <html>
<head>
<title>Summenbeispiel</title>
<script type="text/javascript">
<!--
function changed()
{
with (document.kontakt)
{
var anz_1 = elements['anz1'].value;
var anz_2 = elements['anz2'].value;
var preis_1 = elements['preis1'].value;
var preis_2 = elements['preis2'].value;
var nn_vk = Number((elements['Zahlmethode'][0].checked == true) ? elements['nn'].value : elements['vk'].value);
var ts_1 = anz_1 * preis_1;
var ts_2 = anz_2 * preis_2;
var total_l = ts_1 + ts_2 + nn_vk;
elements['ts1'].value = ts_1.toFixed(2).replace('.', ',');
elements['ts2'].value = ts_2.toFixed(2).replace('.', ',');
elements['total'].value = total_l.toFixed(2).replace('.', ',');
}
}
//-->
</script>
</head>
<body>
<form name="kontakt">
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td>Anzahl</td>
<td><select name="anz1" onchange="changed();">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select> * 5,90 €
<input name="preis1" type="hidden" value="5.90"></td>
<td><input name="ts1" type="text" size="7" value="0,00" readonly="readonly" style="text-align: right;"> €</td>
</tr>
<tr>
<td>Anzahl</td>
<td><select name="anz2" onchange="changed();">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select> * 9,80 €
<input name="preis2" type="hidden" value="9.80"></td>
<td><input name="ts2" type="text" size="7" value="0,00" readonly="readonly" style="text-align: right;"> €</td>
</tr>
<tr>
<td colspan="2"><input name="Zahlmethode" type="radio" value="Post" onclick="changed();" checked="checked">
per Nachnahme</td>
<td align="right">7,50 €<input name="nn" type="hidden" value="7.50"></td>
</tr>
<tr>
<td colspan="2"><input name="Zahlmethode" type="radio" value="Bank" onclick="changed();">
per Überweisung (Vorauskasse)</td>
<td align="right">4,90 €<input name="vk" type="hidden" value="4.90"></td>
</tr>
<tr>
<td colspan="2" align="right">Gesamt</td>
<td><input name="total" type="text" size="7" value="0,00" readonly="readonly" style="text-align: right;"> €</td>
</tr>
</table>
</form>
</body>
</html> |
|
| geschrieben von weisnix am 30.05.2006 - 11:46 |
Ich habe die da mal ein Beispiel geschrieben. Dabei habe ich deine Feldnamen mit übernommen, damit es hoffentlich leichte ist den Durchblick zu behalten.
Dein Script mit der Funktion ist reif für dem Papierkorb.
Ich habe die Funktionen im Formular direkt drin. Die kann man dann über ein Script raus nehmen und auch Variable mit benutzen. Zum allgemeinen Verständnis müsste es aber so reichen.
Sollten die vielen Kommastellen verschwinden muss das dann sowieso ein JS sein.
Ich hoffe das die das Beispiel mal hilft die Rechenfunktionen richtig ein zu setzen.
| HTML-Quelltext | 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:
| <html>
<head>
<title>Formular mit Rechenmethoden</title>
</head>
<body>
<!-- Anfang Formular Name "kontakt" -->
<form name="kontakt">
<p>
<!-- erstes Auswahlfeld -->
<!-- Wertübergabe durch onchange an Teilsumme 1 (Auswahlfeld mal Preis1) -->
<select size="1" name="anz1" onchange="document.kontakt.ts1.value=this.value*document.kontakt.preis1.value;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" name="preis1" value="5.90" readonly="readonly">
<input type="text" name="ts1" readonly="readonly">
</p>
<p>
<!-- zweites Auswahlfeld -->
<!-- Wertübergabe durch onchange an Teilsumme 2 (Auswahlfeld mal Preis2) -->
<select size="1" name="anz2" onchange="document.kontakt.ts2.value=this.value*document.kontakt.preis2.value;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" name="preis2" value="9.80" readonly="readonly">
<input type="text" name="ts2" readonly="readonly">
</p>
<p>Bitte Zahlmethode wählen!</p>
<p><input name="Zahlmethode" value="7.50" type="radio" onclick="document.kontakt.summe.value=(document.kontakt.ts1.value*1)+(document.kontakt.ts2.value*1)+(this.value*1);"> per Nachnahme + 7.50 Euro</p>
<p><input name="Zahlmethode" value="4.90" type="radio" onclick="document.kontakt.summe.value=(document.kontakt.ts1.value*1)+(document.kontakt.ts2.value*1)+(this.value*1);"> per Überweisung + 4.90 Euro<br> (Vorauskasse)</p>
<!-- Ergebnis -->
<!-- Wertübergabe durch onclick an summe (Preis1 + Preis2 + Zahlmethode) -->
<p><input type="text" name="summe" readonly="readonly"></p>
</form>
</body>
</html> |
EDIT: sehe gerade - René hat dir das ja schon fertig geliefert. |
| geschrieben von klape am 30.05.2006 - 12:29 |
Weiß gar ned, wie ich René und "weisnix" danken soll, insbesondere für die Dokumentation, damit ich das ganze auch nachvollziehen kann.
Wird zwar sicherlich dauern, bis ich nur annähernd so weit sein werde wie Ihr, aber es macht Mut und auf diesen Schritt werden viele andere kleine folgen.
Somit ist auch der heutige Abend (Konzert mit "Ronnie James DIO") super gerettet.
Werde heut Abend ein schönes kühles Weissbier auf Euch trinken
Liebe Grüße und nochmals ein RIESENGROSSES DANKE aus München
Kla(us-)Peter
http://xza.us/dio/disc/dio_06.jpg |
|