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!

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 376180

Url: https://administrator.de/forum/formulareingaben-waehrend-eingabe-verarbeiten-und-ergebnis-ausgeben-376180.html

Ausgedruckt am: 02.04.2025 um 03:04 Uhr

3 Kommentare

Neuester Kommentar

https://www.w3schools.com/js/js_events.asp
https://api.jquery.com/category/events/

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

Wie erzeuge ich dann die Ausgabe?

Wenn die Ausgabe in ein HTML Element erfolgen soll:
Mit jQuery

$('#outputid').text(Ergebnisvariable);

Oder plain JavaScript

document.getElementById('outputid').innerText = Ergebnisvariable;  

Wenn stattdessen ein Formularfeld das Ziel der Ausgabe ist nimmst du stattdessen die Eigenschaft value zum Zuweisen des Wertes:

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>