Rechnungsformular

Erstelle mit einer Tabelle ein 4-zeiliges Rechnungsformular. Anzahl, Artikel und Einzelpreis sollen einzugeben sein. Die Artikelsumme, die Gesamtsummer und die Mehwertsteuer sollen berechnet und formatiert ausgegeben werden.

 

 

Code1

Hier wird erstmal nur das Formular erstellt.

<form name="f">
<table border="1" style="BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #cccccc; width:600px;">
<tr><td colspan=4 style="font-size:24pt;text-align:center;">Rechnungsformular</td></tr>
<tr>
<th>Anzahl</th><th>Artikel</th><th>Einzelpreis</th><th>Summe</th>
</tr>

<tr>
<td><input type="text" name="anzahl1" size="3" /></td>
<td><input type="text" name="artikel1" size="50" /></td>
<td><input type="text" name="preis1" size="10" /></td>
<td><input type="text" name="summe1" size="10" /></td>
</tr>

<tr>
<td><input type="text" name="anzahl2" size="3" /></td>
<td><input type="text" name="artikel2" size="50" /></td>
<td><input type="text" name="preis2" size="10" /></td>
<td><input type="text" name="summe2" size="10" /></td>
</tr>

<tr>
<td><input type="text" name="anzahl3" size="3" /></td>
<td><input type="text" name="artikel3" size="50" /></td>
<td><input type="text" name="preis3" size="10" /></td>
<td><input type="text" name="summe3" size="10" /></td>
</tr>

<tr>
<td><input type="text" name="anzahl4" size="3" /></td>
<td><input type="text" name="artikel4" size="50" /></td>
<td><input type="text" name="preis4" size="10" /></td>
<td><input type="text" name="summe4" size="10" /></td>
</tr>

<tr>
<td></td>
<td><input type="button" value="berechnen" onclick="berechnen();"/></td>
<td>MWST:<br /><input type="text" name="mwst" size="10" /></td>
<td>Endsumme:<br /><input type="text" name="endsumme" size="10" /></td>
</tr>
</table>
</form>

Code2

Die benötigte Javascriptfunktion.

<!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" xml:lang="de" lang="de">
<head>
<title>Titel</title>

</head>

<body>
Erstelle mit einer Tabelle ein 4-zeiliges Rechnungsformular. Anzahl, Artikel und Einzelpreis sollen einzugeben sein. Die Artikelsumme, die Gesamtsummer und die Mehwertsteuer sollen berechnet und formatiert ausgegeben werden.
parseFloat() wandelt die Eingabe in eine Kommazahl um.
<form name="f">
<table border="1" style="BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #cccccc; width:600px;">
<tr><td colspan=4 style="font-size:24pt;text-align:center;">Rechnungsformular</td></tr>
<tr>
<th>Anzahl</th><th>Artikel</th><th>Einzelpreis</th><th>Summe</th>
</tr>

<tr>
<td><input type="text" name="anzahl1" size="3" /></td>
<td><input type="text" name="artikel1" size="50" /></td>
<td><input type="text" name="preis1" size="10" /></td>
<td><input type="text" name="summe1" size="10" /></td>
</tr>

<tr>
<td><input type="text" name="anzahl2" size="3" /></td>
<td><input type="text" name="artikel2" size="50" /></td>
<td><input type="text" name="preis2" size="10" /></td>
<td><input type="text" name="summe2" size="10" /></td>
</tr>

<tr>
<td><input type="text" name="anzahl3" size="3" /></td>
<td><input type="text" name="artikel3" size="50" /></td>
<td><input type="text" name="preis3" size="10" /></td>
<td><input type="text" name="summe3" size="10" /></td>
</tr>

<tr>
<td><input type="text" name="anzahl4" size="3" /></td>
<td><input type="text" name="artikel4" size="50" /></td>
<td><input type="text" name="preis4" size="10" /></td>
<td><input type="text" name="summe4" size="10" /></td>
</tr>

<tr>
<td></td>
<td><input type="button" value="berechnen" onclick="berechnen();"/></td>
<td>MWST:<br /><input type="text" name="mwst" size="10" /></td>
<td>Endsumme:<br /><input type="text" name="endsumme" size="10" /></td>
</tr>
</table>
</form>


<script type="text/javascript">
function berechnen()
{
anz1=parseFloat(document.f.anzahl1.value);
preis1=parseFloat(document.f.preis1.value);
summe1=anz1*preis1;
document.f.summe1.value=summe1;

anz2=parseFloat(document.f.anzahl2.value);
preis2=parseFloat(document.f.preis2.value);
summe2=anz2*preis2;
document.f.summe2.value=summe2;

anz3=parseFloat(document.f.anzahl3.value);
preis3=parseFloat(document.f.preis3.value);
summe3=anz3*preis3;
document.f.summe3.value=summe3;

anz4=parseFloat(document.f.anzahl4.value);
preis4=parseFloat(document.f.preis4.value);
summe4=anz4*preis4;
document.f.summe4.value=summe4;

endsumme=summe1+summe2+summe3+summe4;
document.f.endsumme.value=endsumme;

mwst=endsumme*0.2;
document.f.mwst.value=mwst;

}

</script>

</body>
</html>

Code3

Die Funktion mit Arrays etwas eleganter gestaltet.

 <form name="f">
<table border="1" style="BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #cccccc; width:600px;">
<tr><td colspan=4 style="font-size:24pt;text-align:center;">Rechnungsformular</td></tr>
<tr>
<th>Anzahl</th><th>Artikel</th><th>Einzelpreis</th><th>Summe</th>
</tr>

<tr>
<td><input type="text" name="anzahl1" size="3" /></td>
<td><input type="text" name="artikel1" size="50" /></td>
<td><input type="text" name="preis1" size="10" /></td>
<td><input type="text" name="summe1" size="10" /></td>
</tr>

<tr>
<td><input type="text" name="anzahl2" size="3" /></td>
<td><input type="text" name="artikel2" size="50" /></td>
<td><input type="text" name="preis2" size="10" /></td>
<td><input type="text" name="summe2" size="10" /></td>
</tr>

<tr>
<td><input type="text" name="anzahl3" size="3" /></td>
<td><input type="text" name="artikel3" size="50" /></td>
<td><input type="text" name="preis3" size="10" /></td>
<td><input type="text" name="summe3" size="10" /></td>
</tr>

<tr>
<td><input type="text" name="anzahl4" size="3" /></td>
<td><input type="text" name="artikel4" size="50" /></td>
<td><input type="text" name="preis4" size="10" /></td>
<td><input type="text" name="summe4" size="10" /></td>
</tr>

<tr>
<td></td>
<td><input type="button" value="berechnen" onclick="berechnen();"/></td>
<td>MWST:<br /><input type="text" name="mwst" size="10" /></td>
<td>Endsumme:<br /><input type="text" name="endsumme" size="10" /></td>
</tr>
</table>
</form>


<script type="text/javascript">
function berechnen()
{
anzahl=new Array();
preis=new Array();
summe=new Array();

endsumme=0;
for(i=1;i<=4;i++)
{
anzahl[i]=document.getElementsByName("anzahl"+i)[0].value;
preis[i]=document.getElementsByName("preis"+i)[0].value;
summe[i]=parseFloat(anzahl[i])*parseFloat(preis[i]);
document.getElementsByName("summe"+i)[0].value=summe[i];
endsumme+=summe[i];
}

document.f.endsumme.value=endsumme;

mwst=endsumme*0.2;
document.f.mwst.value=mwst;
}

</script>

Code4

In diesem Beispiel wird das gesamte Formular dynamisch ausgeben.  Die Anzahl der Zeilen wird in der Variablen zeilen festgelegt.

<!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" xml:lang="de" lang="de">
<head>
<title>Titel</title>

</head>

<body>



<script type="text/javascript">
zeilen=20;

s="<form name='f'><table border='1' style='BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #cccccc; width:600px;'>";
s+="<tr><td colspan=4 style='font-size:24pt;text-align:center;'>Rechnungsformular</td></tr>";
s+="<tr><th>Anzahl</th><th>Artikel</th><th>Einzelpreis</th><th>Summe</th></tr>";
for(i=1;i<=zeilen;i++)
{
n="anzahl"+i;
s+="<tr><td><input type='text' name="+n+" size='3' /></td>";
s+="<td><input type='text' size='50' /></td>";
n="preis"+i;
s+="<td><input type='text' name="+n+" size='10' /></td>";
n="summe"+i;
s+="<td><input type='text' name="+n+" size='10' /></td></tr>";

}

s+="<tr><td></td><td><input type='button' value='berechnen' onclick='berechnen();'/></td>";
s+="<td>MWST:<br /><input type='text' name='mwst' size='10' /></td>";
s+="<td>Endsumme:<br /><input type='text' name='endsumme' size='10' /></td></tr>";
s+="</table></form>";

document.write(s);



function berechnen()
{
anzahl=new Array();
preis=new Array();
summe=new Array();

endsumme=0;
for(i=1;i<=zeilen;i++)
{
anzahl[i]=document.getElementsByName("anzahl"+i)[0].value;
preis[i]=document.getElementsByName("preis"+i)[0].value;
if(parseFloat(anzahl[i])*parseFloat(preis[i])>0)
{
summe[i]=parseFloat(anzahl[i])*parseFloat(preis[i]);
} else summe[i]=0;
document.getElementsByName("summe"+i)[0].value=summe[i];
endsumme+=summe[i];
}

document.f.endsumme.value=endsumme;

mwst=endsumme*0.2;
document.f.mwst.value=mwst;
}

</script>

</body>
</html>

 

JavaScript-Interaktiv von Ulrich Hirschmann