3
Formulareingaben während Eingabe verarbeiten und Ergebnis ausgeben
Hallo zusammen,
ich bin noch ein Anfänger was Javascript/jQuery angeht, deshalb seht mir mein Anliegen bitte nach.
ich möchte ein HTML-Formular erstellen, in das man Werte für eine Kalkulation eingeben kann.
Die Kalkulation soll während der Eingabe automatisch erfolgen und auch die Ausgabe des Ergebnisses soll am besten direkt neben dem Eingabeformular erfolgen.
Beispiel: es soll die Summe von Feld 1 und Feld 2 gebildet werden.
Man gibt also in Feld 1 den Wert "3" ein, und in Feld 2 den Wert "4". Dann soll nach Eingabe des Wertes "4" sofort in einem Ausgabefeld (nicht per alert-Funktion!) das Ergebnis "7" erscheinen.
Ändert man in Feld 2 den Wert in "45", soll das Ausgabefeld direkt auf "48" springen.
- Da die Werte in dem Formular ggfs häufig geändert werden müssen, soll es nicht jedes Mal erforderlich sein erstmal einen "Berechne"-Button zu drücken.
- Wie kann ich das Live-Ausgabefeld in die Webseite integrieren und gestalten? Es soll auch möglich sein mehrere Werte zu berechnen und auszugeben:
z.B. berechne ich die 48, ziehe daraus gleich 19% MwSt und gebe noch den Netto-Betrag an. Wäre da jQuery UI das richtige Werkzeug, oder was gibts da noch für Möglichkeiten?
Wie realisiere ich am besten a) die Live-Berechnung und b) die Gestaltung der Live-Ausgabe?
Ob alles client-seitig berechnet wird, oder serverseitig per PHP wäre mir noch egal - aber es werden eigentlich nur Grundrechenarten gebraucht.
Vielen Dank vorab!
ich bin noch ein Anfänger was Javascript/jQuery angeht, deshalb seht mir mein Anliegen bitte nach.
ich möchte ein HTML-Formular erstellen, in das man Werte für eine Kalkulation eingeben kann.
Die Kalkulation soll während der Eingabe automatisch erfolgen und auch die Ausgabe des Ergebnisses soll am besten direkt neben dem Eingabeformular erfolgen.
Beispiel: es soll die Summe von Feld 1 und Feld 2 gebildet werden.
Man gibt also in Feld 1 den Wert "3" ein, und in Feld 2 den Wert "4". Dann soll nach Eingabe des Wertes "4" sofort in einem Ausgabefeld (nicht per alert-Funktion!) das Ergebnis "7" erscheinen.
Ändert man in Feld 2 den Wert in "45", soll das Ausgabefeld direkt auf "48" springen.
- Da die Werte in dem Formular ggfs häufig geändert werden müssen, soll es nicht jedes Mal erforderlich sein erstmal einen "Berechne"-Button zu drücken.
- Wie kann ich das Live-Ausgabefeld in die Webseite integrieren und gestalten? Es soll auch möglich sein mehrere Werte zu berechnen und auszugeben:
z.B. berechne ich die 48, ziehe daraus gleich 19% MwSt und gebe noch den Netto-Betrag an. Wäre da jQuery UI das richtige Werkzeug, oder was gibts da noch für Möglichkeiten?
Wie realisiere ich am besten a) die Live-Berechnung und b) die Gestaltung der Live-Ausgabe?
Ob alles client-seitig berechnet wird, oder serverseitig per PHP wäre mir noch egal - aber es werden eigentlich nur Grundrechenarten gebraucht.
Vielen Dank vorab!
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 376180
Url: https://administrator.de/contentid/376180
Printed on: April 24, 2024 at 23:04 o'clock
3 Comments
Latest comment
Hi ho,
ja ok - mit dem keydown bzw keyup-event könnte ich z.B. schonmal die Berechnung auslösen. Teil 1 geklärt.
Bleibt noch Teil 2:
Wie erzeuge ich dann die Ausgabe?
Gruß,
Colt Seavers
ja ok - mit dem keydown bzw keyup-event könnte ich z.B. schonmal die Berechnung auslösen. Teil 1 geklärt.
Bleibt noch Teil 2:
Wie erzeuge ich dann die Ausgabe?
Gruß,
Colt Seavers
Wie erzeuge ich dann die Ausgabe?
Wenn die Ausgabe in ein HTML Element erfolgen soll:
Mit jQuery
$('#outputid').text(Ergebnisvariable); document.getElementById('outputid').innerText = Ergebnisvariable; document.getElementById('outputid').value = Ergebnisvariable; Hier ein simples Beispiel:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Calc Demo</title>
</head>
<script type="text/javascript">
function calc(){
var field1 = document.getElementById('wert1');
var field2 = document.getElementById('wert2');
var fieldResult = document.getElementById('Ergebnis');
field1.value = field1.value.replace(/,/,".");
field2.value = field2.value.replace(/,/,".");
field1.value = field1.value.replace(/[^\d.-]/g,"");
field2.value = field2.value.replace(/[^\d.-]/g,"");
fieldResult.value = (!isNaN(parseFloat(field1.value)) && !isNaN(parseFloat(field2.value))) ? (parseFloat(field1.value) + parseFloat(field2.value)).toFixed(2) : "";
}
</script>
<body>
<table width="500" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="100">Erster Wert</td>
<td>
<input type="text" name="wert1" id="wert1" onKeyUp="calc();">
+</td>
</tr>
<tr>
<td>Zweiter Wert</td>
<td><input type="text" name="wert2" id="wert2" onKeyUp="calc();">
=</td>
</tr>
<tr>
<td>Ergebnis</td>
<td><input type="text" name="Ergebnis" id="Ergebnis"></td>
</tr>
</table>
</body>
</html>
