Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

Rechnen innerhalb einer Webseite

Frage Entwicklung HTML

Mitglied: DrAlcome

DrAlcome (Level 1) - Jetzt verbinden

28.09.2009 um 13:48 Uhr, 6933 Aufrufe, 15 Kommentare, 1 Danke

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.
Mitglied: Arano
28.09.2009 um 15:20 Uhr
Huhu DrAlcome

habe da mal schnell etwas kleine zusammen getippt, damit müsste man was anfangen können:
01.
<html> 
02.
  <head> 
03.
    <title></title> 
04.
    <script type="text/javascript"> 
05.
      <!-- 
06.
        function form_calculate() 
07.
08.
            // Wert des ersten Feldes auslesen: 
09.
            var wert1         = Number(document.getElementById('wert1').value); 
10.
            // Wert des zeiten Feldes auslesen: 
11.
            var wert2         = Number(document.getElementById('wert2').value); 
12.
            // Das Ergebnisfeld als Object ermittlen, um spaeter das Ergebnis einfuegen zu koennen 
13.
            var resultField   = document.getElementById('result'); 
14.
            // Felder zusammen rechnen 
15.
            var result        = wert1+wert2; 
16.
            // Ergebnis ins Ergebnisfeld eintragen 
17.
            resultField.value = result; 
18.
19.
      --> 
20.
    </script> 
21.
  </head> 
22.
  <body> 
23.
     
24.
    <form> 
25.
      <fieldset> 
26.
        <legend>Rechner</legend> 
27.
        <input type="text" name="wert1" id="wert1" onkeyup="form_calculate();"><br> 
28.
        <input type="text" name="wert2" id="wert2" onkeyup="form_calculate();"><br> 
29.
        <br> 
30.
        <input type="text" name="result" id="result"><br> 
31.
      </fieldset> 
32.
    </form> 
33.
     
34.
  </body> 
35.
</html>
Anstelle von "onkeyup" könnte man auch "onfocus" oder "onblur" verwenden ;)

Gruß Arano
Bitte warten ..
Mitglied: DrAlcome
28.09.2009 um 15:26 Uhr
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!!!
Bitte warten ..
Mitglied: Guenni
28.09.2009 um 16:06 Uhr
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
Bitte warten ..
Mitglied: Arano
28.09.2009 um 16:20 Uhr
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
Bitte warten ..
Mitglied: Jochem
29.09.2009 um 10:15 Uhr
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
Bitte warten ..
Mitglied: Arano
29.09.2009 um 11:02 Uhr
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 !
  1. Geht das wahrscheinlich eh schneller als das Übertragen zum Server und Neuaufbau der Seite.
  2. So schwer ist es auch nicht einen kleinen Button zu drücken - sind wir den schon sooo faul geworden !?
  3. 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
  4. 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
Bitte warten ..
Mitglied: Jochem
29.09.2009 um 12:05 Uhr
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
Bitte warten ..
Mitglied: Arano
29.09.2009 um 12:17 Uhr
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
Bitte warten ..
Mitglied: woolfrace
31.01.2015 um 14:35 Uhr
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">
<!--
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 subtrahieren
var result = wert2-wert1;
// Ergebnis ins Ergebnisfeld eintragen
resultField.value = result;
}
-->
</script>
</head>
<body>

<form>
<fieldset>
<legend>Rechner</legend>
Z&auml;hlerstand Vormonat:
<input type="text" name="wert1" id="wert1" onkeyup="form_calculate();">
Z&auml;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>
Bitte warten ..
Mitglied: Arano
31.01.2015 um 15:13 Uhr
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 !
01.
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
Bitte warten ..
Mitglied: woolfrace
31.01.2015, aktualisiert um 16:25 Uhr
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
Bitte warten ..
Mitglied: Arano
31.01.2015 um 17:03 Uhr
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.

01.
<html> 
02.
  <head> 
03.
    <title></title> 
04.
    <script type="text/javascript"> 
05.
      <!-- 
06.
        function form_calculate() 
07.
08.
            // Wert der beiden Eingabefelder auslesen: 
09.
            var wert1          = Number(document.getElementById('wert1').value); 
10.
            var wert2          = Number(document.getElementById('wert2').value); 
11.
            // Die Ergebnisfelder als Object ermittlen, um spaeter die Ergebnisse einfuegen zu koennen 
12.
            var resultField1   = document.getElementById('result1'); 
13.
            var resultField2   = document.getElementById('result2'); 
14.
            // Werte berechnen 
15.
            var result1        = wert2-wert1; 
16.
            var result2        = result1/30; 
17.
            // Ergebnis ins Ergebnisfeld eintragen 
18.
            resultField1.value = result1; 
19.
            resultField2.value = result2; 
20.
21.
      --> 
22.
    </script> 
23.
    <style type="text/css"> 
24.
      <!-- 
25.
        label { display:inline-block; width:220px; text-align:right; } 
26.
      --> 
27.
    </style> 
28.
  </head> 
29.
  <body> 
30.
     
31.
    <form> 
32.
      <fieldset> 
33.
        <legend>Rechner</legend> 
34.
        <label for="wert1">Z&auml;hlerstand Vormonat:</label><input type="text" name="wert1" id="wert1" onkeyup="form_calculate();"><br> 
35.
        <label for="wert2">Z&auml;hlerstand Heute:</label   ><input type="text" name="wert2" id="wert2" onkeyup="form_calculate();"><br> 
36.
        <br> 
37.
        <label for="result1">Monatsvserbrauch:</label><input type="text" name="result1" id="result1" readonly><br> 
38.
        <label for="result2">Tagesverbrauch:</label  ><input type="text" name="result2" id="result2" readonly><br> 
39.
      </fieldset> 
40.
    </form> 
41.
     
42.
  </body> 
43.
</html>

~Arano
Bitte warten ..
Mitglied: woolfrace
31.01.2015 um 17:29 Uhr
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
Bitte warten ..
Mitglied: Arano
31.01.2015, aktualisiert um 17:52 Uhr
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
Bitte warten ..
Mitglied: woolfrace
31.01.2015 um 18:00 Uhr
Danke Arano für deine Bemühungen und dein Herz für Nichtcoder! Jetzt passt es so wie ich es benötige.

L.G. aus Wien
Woolfrace
Bitte warten ..
Neuester Wissensbeitrag
Ähnliche Inhalte
Linux Desktop
Webseite aufgerufen - Linux gehackt (5)

Link von BirdyB zum Thema Linux Desktop ...

RedHat, CentOS, Fedora
gelöst Die Website hat die Anzeige dieser Webseite abgelehnt - SePolicies - Linux (1)

Frage von rainergugus zum Thema RedHat, CentOS, Fedora ...

Windows Server
Windows-Domäne und CloudFlare für Webseite (7)

Frage von d4shoerncheN zum Thema Windows Server ...

DNS
Webseite mit IPv6 freigeben (1)

Frage von Lanseuo zum Thema DNS ...

Heiß diskutierte Inhalte
Windows Userverwaltung
Ausgeschiedene Mitarbeiter im Unternehmen - was tun mit den AD Konten? (22)

Frage von patz223 zum Thema Windows Userverwaltung ...

Viren und Trojaner
Aufgepasst: Neue Ransomware Goldeneye verbreitet sich rasant (20)

Link von Penny.Cilin zum Thema Viren und Trojaner ...

LAN, WAN, Wireless
FritzBox, zwei Server, verschiedene Netze (19)

Frage von DavidGl zum Thema LAN, WAN, Wireless ...

Windows Netzwerk
Windows 10 RDP geht nicht (18)

Frage von Fiasko zum Thema Windows Netzwerk ...