28.09.2009

24480

Rechnen innerhalb einer Webseite

Ich habe ein kleines Formular auf einer Seite, wo die Daten per PHP addiert werden. Optimal wäre es, wenn die Daten in Echtzeit addiert werden, ohne dass man auf einen Submit-Button drücken muss.

Hi Leute!

Ich habe in unserem Intranet eine Seite gebaut in der ein kleines Formular zum Errechnen eines Überschusses (geht um eine Finanzberatung) enthalten ist. Momentan habe ich es so gebaut, dass man die Daten eingibt und dann auf den Submit-Button klickt. Dann werden die Werte per PHP ausgelesen und in einem Summenfeld addiert/subtrahiert.
Interessanter wäre es allerdings wenn die Summenfelder Zahlen sich sofort errechnen, d.h. ohne dass man einen Submit-Button klicken muss. Ungefähr so wie in Excel, wo ja auch eine Echtzeit-Berechnung durchgeführt wird, sobald man in die nächste Zelle springt.

Das wird mit PHP nicht realisierbar sein, denn man muss PHP ja erstmal sagen das es etwas machen soll. Aber wie sieht es mit einer anderen Programmiersprache (JavaScript?) aus? Vielleicht geht es ja relativ unkompliziert?
Habe leider nur HTML und PHP gelernt ;-(

Würde mich über ein Paar Ratschläge freuen.

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

Content-ID: 125948

Url: https://administrator.de/contentid/125948

Ausgedruckt am: 22.11.2024 um 03:11 Uhr

15 Kommentare

Neuester Kommentar

Huhu DrAlcome

habe da mal schnell etwas kleine zusammen getippt, damit müsste man was anfangen können:

<html>
  <head>
    <title></title>
    <script type="text/javascript">  
      <!--
        function form_calculate()
        {
            // Wert des ersten Feldes auslesen:
            var wert1         = Number(document.getElementById('wert1').value); 
            // Wert des zeiten Feldes auslesen:
            var wert2         = Number(document.getElementById('wert2').value); 
            // Das Ergebnisfeld als Object ermittlen, um spaeter das Ergebnis einfuegen zu koennen
            var resultField   = document.getElementById('result'); 
            // Felder zusammen rechnen
            var result        = wert1+wert2;
            // Ergebnis ins Ergebnisfeld eintragen
            resultField.value = result;
        }
      -->
    </script>
  </head>
  <body>
    
    <form>
      <fieldset>
        <legend>Rechner</legend>
        <input type="text" name="wert1" id="wert1" onkeyup="form_calculate();"><br>  
        <input type="text" name="wert2" id="wert2" onkeyup="form_calculate();"><br>  
        <br>
        <input type="text" name="result" id="result"><br>  
      </fieldset>
    </form>
    
  </body>
</html>

Anstelle von "onkeyup" könnte man auch "onfocus" oder "onblur" verwenden ;)

Gruß Arano

Yeah cool!
Genau das wollte ich haben! Mit dem Grundgerüst kann ich das ja weiter ergänzen damit alle Felder berücksichtigt werden.

Super, vielen Dank!!!

Hi Arano,

nur das letzte Eingabefeld benötigt einen event-Handler. Die Berechnung sollte ja erst dann erfolgen,

wenn alle nötigen Eingaben getätigt sind

Als event-Handler würde ich onblur nehmen.

Gruß
Günni

Hallo Günni

ja, klingt auch einleuchtend !
Dachte aber auch... nee, eigentlich dachte ich gar nicht :D

Naja, ein "onkeyup" als letzten event-Header fände ich auch nicht schlecht, dann muss man das Feld nicht noch extra verlassen damit die Berechnung statt findet - allerdings wird diese bei großen Zahlen relativ häufig und unnütz durchgeführt.

Ach, ist wohl mal wieder reine Ansichtssache ^^

~Arano

Moin,
mal so blöd nachgefragt: Die "on irgendwas" benötigen doch auch eine Aktion, damit der Event-Handler aktiviert wird. Und ob ich nun das letzte Feld mit einem Tab oder Enter verlasse, oder nach der Eingabe auf einen Button "Submit" drücke, ist doch vom Aufwand her gleich.
Der TO wollte aber doch eine Lösung, die ohne eine derartige Aktion zum Ergebnis führt, oder sehe ich da was falsch?

Gruß J

chem

Moin moin Jochem

Nene, da siehste nichts falsch.
Deswegen habe ich ja auch "onkeyup" benutzt und es danach noch einmal erwähnt ;)
"onkeyup" reagiert (wie der Name schon sagt) auf das "loslassen" einer Taste. Wenn du nun also in das letzte Feld eine Zahl eintippst, wird die Berechnung jedes mal durchgeführt nachdem du auf eine Taste gedrückt hast, diese also nach dem runter drücken wieder hochkommt (onkeyup). Das gegenstück dazu lautet "onkeydown".

Das hat aber auch den "Nachteil" (wie schon erwähnt) das bei größeren Zahlen die Berechnung mehrfach unnütz durchgeführt wird. Bei der Zahl 12.540 sind es fünf onkeyup's wobei nur der letzte von Bedeutung ist weil erst dann die Zahl vollständig ist.
"Nachteil" ist natürlich relativ und abhängig davon wie groß die Zahlen und komplex die Rechnung wirklich ist !?

Das haste bei einem "onblur" natürlich nicht, dafür aber wieder den "extra Schritt".
Ach, eigentlich ist ein ein "onblur" gar nicht so verkehrt oder *ding*idee* ein "onsubmit" des Formulares !

Geht das wahrscheinlich eh schneller als das Übertragen zum Server und Neuaufbau der Seite.
So schwer ist es auch nicht einen kleinen Button zu drücken - sind wir den schon sooo faul geworden !?
Wenn ich vielleicht sowieso schon per Tab durch die Felder wandere und mit der rechten Hand die Zahlen eintippe, kann ich auch einmal mehr auf die Tab-Taste tippen oder
am Ende auf Return kloppen damit das Formular "abgeschickt" wird und der "onsubmit" ausgelöst wird.

Achja, da giebt es viele Möglichkeiten wie die Personen das Formular ausfüllen können...
Und letzten Endes liegt es dann doch bei DrAlcome wie es umgesetzt wird bzw. bei den Benutzern die damit nicht zurecht komme und sich "Beschweren".

~Arano

Moin,
ja, so hatte ich es auch in Erinnerung: bei "on irgendwas" muß eben irgendwas passieren, damit die entsprechende Aktion ausgeführt wird. Und damit gehen dann ja die hier vorgestellten Lösungsvorschläge an der Fragestellung des TO vorbei. Aber wie schon ausgeführt: Der TO muß mit den Lösungen leben bzw. seine Anwender.

Gruß J

chem

Hehe, __irgendetwas__ muss sowieso passieren, sei es das aufrufen der Seiten, ausfüllen der Felder, abschicken der Formulars, markieren, demarkieren, klicken oder irgendetwas anderes.
Und nur anhand dieser Aktionen kann doch bestimmt / abgeschätzt werden das das Formular überhaupt ausgefüllt wurde bzw. befüllt wird - da kommen wir gar nicht drumherum.

~Arano

$woolfrace$

Hallo zusammen!

Nach lange Suche habe ich endlich ein Formular gefunden, welches ich dringend benötige.
Ich muss einen Wasserverbrauch berechen und habe den angegebeb Code von Arano ein wenig angepasst.
Soweit funktioniert die Berechnung nur müsste ich noch den Tagesverbrauch (30 Tage) berechen.

Es müsste noch ein Feld hinzugefügt werden <input type="text" name="tage" id="tage">
das automatisch vom Feld <input type="text" name="result" id="result"> berechnet wird.

Wenn ich oben im PHP Code "var result = result / 30;" eintage tut sich leider nichts.

Könntet ihr bitte so nett sein und den Code anpassen?
Danke schon mal vorweg!!

Der originale Code ein wenig angepasst:
<html>
<head>
<title></title>
<script type="text/javascript">

</script>
</head>
<body>

<form>
<fieldset>
<legend>Rechner</legend>
Zählerstand Vormonat:
<input type="text" name="wert1" id="wert1" onkeyup="form_calculate();">
Zählerstand heute:
<input type="text" name="wert2" id="wert2" onkeyup="form_calculate();">
Verbrauch pro Monat:
<input type="text" name="result" id="result"><br>
</fieldset>
</form>

</body>
</html>

Hallo Woolfrace

Wow, freut mich das nach vier Jahren jemand weiteres einen Nutzen daraus ziehen kann.
Klar helfe ich dir dabei !

Aber sagmal, die Informationen wiedersprechen sich ein wenig !
In deiner Anfrage sprichst du von dem Tagesverbrauch,
im Quelltest steht aber Monatsverbrauch

Wie auch immer... wenn ich die Zeile 17 wie folgt ändere, funktioniert es bei mir !

resultField.value = result/30;

Allerdings muss ich (Firefox) die Seite erst mit [Strg+F5] komplett neu laden (sonst wird die ALTE Version aus dem Zwischenspeicher verwendet !)

Gebe ich nun die Werte 1000 und 2000 ein, erhalte ich im letzten Feld die Berechnung: 33.333333333333336
2000-1000=1000 /30=33.333333333333336

Das ist kein PHP !
PHP wird auf dem Server ausgeführt, dazu müssten wir die Daten erst an den Server abschicken, der werte sie aus und berechnet und erzeugt und dann eine neue Seite mit der Ergebnis.
Hier wird Javascript verwendet, das wird lokal ausgeführt - direkt in und von deinem Browser.

~Arano

$woolfrace$

Servus Arano!

Danke für deine rasche Antwort und noch dazu am Wochenende! Danke!!

Ok vielleicht hab ich mich schlecht ausgdrückt.

Ich muss einen Wasserverbrauch berechnen.
Dazu brauche ich 2 Eingabefelder
"Feld1" (Stand des Vormonats)
"Feld 2" (Stand heute)

"Feld3" wird die Differenz von Feld 1 und 2 ausgegeben "var result = wert2-wert1;" (2000 - 1000=1000) und zusätzlich ein
"Feld 4" wo der Tagesverbrauch angezeigt werden.

Das Feld 3 funktioniert ja prächtig aber ich bräuchte noch ein "Feld4" das es noch nicht gibt.
Und ich dachte man kann das vom Feld 3 (id="result") berechnen.

Dazu habe ich oben im Java-Code unter Zeile 15 "var result = result/30;" eingefügt
und im HTML-Code nach Zeile 32 "input type="text" name="tage" id="tage"> eingefügt.
Das wars wohl nicht. ^^

L.G.
Wollfrace

Moin moin !

Hinweis:
Dieses Forum verwendet unter anderem einfache Textzeichen um Formatierungen zu ermöglichen.
Z.B. wird mit zwei "^" eine kleine Schriftgröße verwendet: Ich bin kleiner, solange bis wieder zwei "^" kommen.
Oder mit zwei "*" umschlossen für fetten Text.
Irgendwo waren die Formatierungshilfen, ruhig mal durchlesen, da findet man auch Möglichkeiten wenn man Quellcodes Posten möchte

Nee, das ist auch kein Java :-P
Java ist wieder etwas anders... Javascript ist es!

Also ganz verkehrt war es nicht was du versucht hast aber da fehlte noch etwas
result = result/30 wäre schon richtig, aber erst NACHDEM der Wert zum ersten mal ausgegeben wurd !
result enthält im ersten Moment ja den Monatsverbrauch, wenn dann result mit einem neuen Wert (dem Tagesverbrauch) überschrieben wird ist der erste Wert natürlich weg und kann nicht mehr ausgegeben werden bzw. an beiden stellen stünde der gleiche Wert, nämlich der Tagesverbrauch.
Würde erst der Monatsverbrauch ausgegeben werden und danach die Variable result mit dem Tagesverbrauch gefüllt werden, wäre das okay.
Allerdings wäre das auch verwirrden weil eine Variabel dann zwei verschiedene Bedeutungen hätte, je nach dem wan und wo sie steht - dann lieber eine Neue nehmen.

Auch das Einfügen eines neuen input-Elements war korrekt, allerdings woher soll mann jetzt wissen welcher Wert in welches Feld soll... und... soll das überhaupt passieren !? Code macht nur das was du ihm sagst !
Es fehlte also noch weitere Javascript mit dem der Wert in das neue Element geschrieben werden soll.

Ich habe jetzt meinen originalen Quelltext genommen und ihn angepasst. Allerdings lasse ich die Felder wieder untereinander anzeigen stat nebeneinander, habe dafür aber definierte Labels eingesetzt und diesen mit CSS eine feste Breite gegeben um eine gleichmäßige Optik zu erzeugen.
Die beiden Ergebnissfelder sind nun auch nur noch "readonly".

Beser wäre es jetzt noch gewesen, wenn ich die Variabeln umbenannt hätte !
wert1 und result234 da steigt auf Dauer keiner durch - da müssen eindeutige Namen her !
Das überlasse ich aber dem der es verwenden möchte.

<html>
  <head>
    <title></title>
    <script type="text/javascript">  
      <!--
        function form_calculate()
        {
            // Wert der beiden Eingabefelder auslesen:
            var wert1          = Number(document.getElementById('wert1').value); 
            var wert2          = Number(document.getElementById('wert2').value); 
            // Die Ergebnisfelder als Object ermittlen, um spaeter die Ergebnisse einfuegen zu koennen
            var resultField1   = document.getElementById('result1'); 
            var resultField2   = document.getElementById('result2'); 
            // Werte berechnen
            var result1        = wert2-wert1;
            var result2        = result1/30;
            // Ergebnis ins Ergebnisfeld eintragen
            resultField1.value = result1;
            resultField2.value = result2;
        }
      -->
    </script>
    <style type="text/css">  
      <!--
        label { display:inline-block; width:220px; text-align:right; }
      -->
    </style>
  </head>
  <body>
    
    <form>
      <fieldset>
        <legend>Rechner</legend>
        <label for="wert1">Z&auml;hlerstand Vormonat:</label><input type="text" name="wert1" id="wert1" onkeyup="form_calculate();"><br>  
        <label for="wert2">Z&auml;hlerstand Heute:</label   ><input type="text" name="wert2" id="wert2" onkeyup="form_calculate();"><br>  
        <br>
        <label for="result1">Monatsvserbrauch:</label><input type="text" name="result1" id="result1" readonly><br>  
        <label for="result2">Tagesverbrauch:</label  ><input type="text" name="result2" id="result2" readonly><br>  
      </fieldset>
    </form>
    
  </body>
</html>

~Arano

$woolfrace$

Servus Arano!

Sorry aber ich habe nichts zur Formatierung in der Suche gefunden, außer 1 Beitrag wo das Fehlen der Formatierung eines Textes bemängelt wurde.
Und sonst hab ich hier im Forum auch keine Formatierung gefunden.

Trotzdem ein herzliches Danke!! Das ist genau das was ich benötige.
Könntest du mir noch 1x behilflich sein und mir sagen wie und wo ich die Begränzung der Kommastellen bei Tagesverbrauch einschreiben soll?
15 Kommastellen sind ein bisserl viel.

Danke dir und ein schönes Weekend!
Woolfrace

Hi.

Ja wegen den Formatierunghilfen mach dir mal keinen Kopf, die sind einfach etwas versteckt.
Wenn ich mich richtig erinner gibt es beim erstellen einer neuen Frage einen Link und wenn man seinen Beitrag bearbeitet aber beim normalen Antworten gibt es keinen.

Jap, auch das kann ich noch !
Eigentlich wollte ich dir gerade nur die passende Funktion zu werfen und dich mal selber machen lassen, aber in diesem Fall wäre das gemein denn es gibt für Nachkomastellen keine Funktion ! Aber es geht trotzdem - mit Mathematik

var result2 = Math.round( (result1/30)*100 )/100;
w3schools - Math.round()

Schönes Wochenende noch
~Arano

$woolfrace$