in einer Form rechnen

[hans]

Hallo,
wer hat ein Musterbeispiel für mich.
Ich möchte einen Artikel, einen Preis und eine Stückzahl auflisten. In einer FORM.
Bei Eingabe oder Änderung der Stückzahl soll eine Summe angezeigt werden oder verändert werden.

Mantel     12.35 €  1 Stück
Degen      62.30 €  0 Stück
Colt      123.45 €  1 Stück

Summe 135.80 €
ODER

Mantel     12.35 €  1 Stück
Degen      62.30 €  0 Stück
Colt      123.45 €  0 Stück

Summe  12.35 €

Ich hoffe man versteht mich, danke.
Gruß Hans

[Hans]

Hallo Hans,

sowas würde ich mit JavaScript realisieren.

Gruß

Hans

[Mathias Brodala]

Hallo hans.

Ich möchte einen Artikel, einen Preis und eine Stückzahl auflisten. In einer FORM.

Was für eine? Rund, eckig, tannenbaumförmig, …?

Einen schönen Montag noch.

Gruß, Mathias

[rfb]

Moin

im head-bereich oder externen JavaScript diese Funktion:

<script type="text/javascript">  
function summe() {  
var s=0;  
for (var i=1;i<4;i++) {  
s+=(parseFloat(document.getElementById("preis"+i).firstChild.data)*parseInt("0"+document.getElementById("a"+i).value))  
}  
document.getElementById("summe").firstChild.data=s;  
}  
</script>

und das Formular in Form einer (hier auch sinnvollen) Tabelle:

<table><caption>Preisrechner</caption>  
<tr><th>Ware</th><th>Einzelpreis</th><th>Anzahl</th></tr>  
<tr><td>Mantel</td><td><span id="preis1">12.35</span> &euro;</td><td><input type="text" id="a1" value="0" size="3" onchange="summe()"></td></tr>  
<tr><td>Degen</td><td><span id="preis2">62.30</span> &euro;</td><td><input type="text" id="a2" value="0" size="3" onchange="summe()"></td></tr>  
<tr><td>Colt</td><td><span id="preis3">123.45</span> &euro;</td><td><input type="text" id="a3" value="0" size="3" onchange="summe()"></td></tr>  
<tr><th>Summe</th><td colspan="2"><span id="summe">0</span> &euro;</td></tr>  
</table>

Gruß
rfb

[hans]

Hallo,
danke an RFB, das ist mehr als ich erwartet habe,
ich habe gedacht, das müßte (könnte) man mit einem mehrdim. Array
machen.
Noc´h eine bescheidene Frage, wie kann man es verhindern, daß
beim versehentlichen RETURN die Liste SUBMITTED wird und die Felder alle wieder leer sind.
Gruß Hans
Für die Lustigen, die FORM wird rechteckig. :-)

[rfb]

Moin

steht bereits drin: onsubmit="return false"
Solange JavaScript verfügbar ist, wird das Formular nicht abgesendet.
Du könntest auch stattdessen in action angeben: action="javascript:summe()"
Dann würde beim Absenden einfach die Summe neu berechnet.

Gruß
rfb

[rfb]

Moin

steht bereits drin: onsubmit="return false"

nur in meinem Entwurf, beim Kopieren vergessen:

<form action="#nix" onsubmit="return false">
<table>...
</table>
</form>

Gruß
rfb

[Struppi]

danke an RFB, das ist mehr als ich erwartet habe,
ich habe gedacht, das müßte (könnte) man mit einem mehrdim. Array
machen.

kann man auch:

function watchForm(f)  
{  
    if(!f) return;  
  
    for(var i = 0; i < f.elements.length; i++)  
    {  
         var el = f.elements[i];  
         if(el.type == 'text') el.onkeyup = el.onblur = gesamt_summe;  
    }  
}  
function gesamt_summe()  
{  
    var f = this.form;  
    var index = 0;  
    var gg = 0;  
    while( f.anzahl[index] )  
    {  
        var anzahl = f.anzahl[index].value || 0;  
        var preis = f.preis[index].value || 0;  
        gg += f.summe[index].value = anzahl * preis;  
        index++;  
    }  
    f.gg_summe.value = gg;  
}  
window.onload = function()  
{  
watchForm( document.forms['rechne'] );  
};  

und der HTML code sieht dann z.b. so aus:

<form action="#" name="rechne">  
<table>  
<tr>  
<td> Typ </td> <td> Anzahl </td> <td> Preis </td> <td> Summe </td>  
</tr>  
  
<tr>  
<td> <input name="typ"> </td>  
<td> <input name="anzahl"> </td>  
<td> <input name="preis"> </td>  
<td> <input name="summe"> </td>  
</tr>  
  
<tr>  
<td> <input name="typ"> </td>  
<td> <input name="anzahl"> </td>  
<td> <input name="preis"> </td>  
<td> <input name="summe"> </td>  
</tr>  
  
<tr>  
<td colspan=3> Summe: </td>  
<td> <input name="gg_summe"> </td>  
</tr>  
</table>  
  
</form>  

Struppi.