In diesem Artikel erfahren Sie, wie Sie JavaScript in Kombination mit dem Formularelement „Berechneter Wert“ einsetzen können. Am Beispiel eines Kostenrechners für Wandfarbe wird erläutert, wie Sie die benötigte Farbmenge und die Gesamtkosten basierend auf der zu streichenden Fläche und der gewählten Farbe berechnen. Dabei lernen Sie, verschiedene Formularwerte sinnvoll zu verknüpfen und Berechnungen zu automatisieren.
Der Kostenrechner wird auf einer neuen, leeren Formularseite erstellt, die ausschließlich für diesen Zweck vorgesehen ist. Folgen Sie den nachstehenden Schritten:
Für die Berechnung der zu streichenden Wandfläche sind die Maße des Raumes erforderlich.
Erstellen Sie drei Eingabefelder für Länge, Breite und Höhe des Raumes. Achten Sie darauf, dass die technischen Namen korrekt angegeben werden, da diese für Berechnungen benötigt werden.
Eingabefeld für Länge |
|
| Beschriftung | Raumlänge in Meter |
| Technischer Name | raumlaenge |
| Validierung | Zahl (kleinster Wert: 0) |
Eingabefeld für Breite |
|
| Beschriftung | Raumbreite in Meter |
| Technischer Name | raumbreite |
| Validierung | Zahl (kleinster Wert: 0) |
Eingabefeld für Höhe |
|
| Beschriftung | Raumhöhe in Meter |
| Technischer Name | raumhoehe |
| Validierung | Zahl (kleinster Wert: 0) |
Damit Fenster und Türen von der Gesamtfläche abgezogen werden können, müssen diese im Formular angegeben werden.
Eingabefeld für Abzugsfläche |
|
| Beschriftung | Abzugsfläche in Quadratmetern |
| Technischer Name | abzugsflaeche |
| Validierung | Zahl (kleinster Wert: 0) |
Lassen Sie die Nutzerinnen und Nutzer zwischen verschiedenen Farbqualitäten wählen.
Erstellen Sie eine Einfachauswahl mit verschiedenen Farbqualitäten.
Einfachauswahl für Farbauswahl |
|
| Beschriftung | Gewünschte Farbqualität |
| Technischer Name | farbe |
| Optionen |
|
Automatisieren Sie nun die Berechnungen mit JavaScript.
Erstellen Sie einen 'Berechneten Wert'.
Berechneter Wert für Wandfläche |
|
| Beschriftung | Zu streichende Wandfläche |
| Technischer Name | wandflaeche |
| JavaScript | |
| Aktivieren Sie |
|
Das macht die JavaScript-Funktion:
Erstellen Sie einen 'Berechneten Wert'.
Berechneter Wert für Farbmenge |
|
| Beschriftung | Benötigte Farbmenge |
| Technischer Name | farbmenge |
| JavaScript | |
| Aktivieren Sie |
|
Das macht die JavaScript-Funktion:
Erstellen Sie einen 'Berechneten Wert'.
Berechneter Wert für Gesamtkosten |
|
| Beschriftung | Gesamtkosten |
| Technischer Name | gesamtkosten |
| JavaScript | |
| Aktivieren Sie |
|
Die JavaScript-Funktion multipliziert die berechnete Farbmenge mit dem Literpreis der gewählten Farbe.
Ihr Wandfarbenrechner ist nun einsatzbereit und umfasst:
Testen Sie den Rechner mit verschiedenen Eingabewerten, um sicherzustellen, dass alle Berechnungen korrekt funktionieren.
Dieser Wandfarbenrechner ist auch als Vorlage auf unserer Website verfügbar. Sie finden die Vorlage unter Self Service .
Die Vorlage wurde so konzipiert, dass sie ausschließlich für die Berechnung dient, beispielsweise für ein Produkt auf Ihrer Website. Daher ist der Absenden-Button ausgeblendet, da keine Formularübermittlung erforderlich ist.
