Automatisch berechnendes HTML-Formular

• Oft wird ein HTML - Formular benötigt, das - wie MS Excel - neue Eingaben sofort verarbeitet und das Ergebnis auswirft.
  
  
• Zwar gibt es dafür einige Add-Ins für Excel selbst, zum direkten umwandeln einer Excel - Tabelle in ein aktives HTML - Formular, aber nicht jeder hat das Programm, und wie gut diese funktionieren ist eine zweite Frage (möglicherweise gibt es auch eine Möglichkeit über den Umweg über ein aktives Formular im PDF - Format).
  
  
• Generell kann man Excel - oder andere Kalkulationstabellen jedoch nur als passive HTML - Tabellen abspeichern, als Abbild der gerade berechneten Werte.
  
  
• Zwar gibt es die Möglichkeit, Formulare mit Hilfe von PHP serverseitig zu verwerten; aber hier soll versucht werden, das Ganze in den vier Grundrechnungsarten in reinem JavaScript hinzubekommen, ohne das Formular abschicken zu müssen. Allerdings kann das Ergebnis dadurch nicht gespeichert (wohl aber ausgedruckt) werden.
  

Bitte nur Zahlen eingeben! Bestätigen durch Weiterspringen mit der [ Shift ] -   Taste, oder durch Klicken in das nächste Eingabefeld. Die Seite neu laden mit    oder  +   - je nach Browser.
Erste Eingabe: A Zweite Eingabe: B	Die etwas erratische Farbgebung von Fehlern, Tausender- und Dezimalzahlen ist der unterschiedlichen Fehlerbehandlung der Browser in deutscher Sprache geschuldigt, welche auch dazu zwingt, die Tausender- Trennzeichen (Punkte) und Dezimal- Trennzeichen (Kommas) für die Berechnung im englischsprachigen Java Script umzutauschen. Man kann sie jedoch abschalten; dann werden allerdings auch Fehleingaben nicht mehr hervorgehoben. Die Anzahl der Dezimalstellen läßt sich einstellen.
Erstes Ergebnis: C = A x B Zweites Ergebnis: D = C x 2	Wichtig ist in dem Zusammenhang, daß im Formular selbst keine Eingabefelder außer den zur Berechnung notwendigen vorliegen, denn jedes Feld löst das nächste aus; die Eingabereihenfolge wird durch Tabindex erzwungen. Mehr dazu hier. Nach jeder Eingabe und Berechnung springt der Fokus wieder in das erste Feld.
Dritte Eingabe: E	Drittes Ergebnis: F = (D - E) * 100
Vierte Eingabe: G	Viertes Ergebnis: H = F / G

• Aufbau, HTML und JavaScript Code erschließen sich, wenn im Browser oder Texteditor der Quelltext dieser Seite aufgerufen wird.
  
  
• Weitere Erläuterungen hier.     · Eine praktische Anwendung hier.

Mehr
------

JHR 2015