Georg: Eingabefeld input automatisch speichern

Hallo in die Runde,

ich benutze diese Forum schon seit Monaten, vor allem zum Nachlesen, bei aufkommenden Fragen.

Jetzt habe ich eine zu der ich keine Antwort finde. Ich möchte ein Formular (über HTML,CSS) erstellen. Dies sieht aus wie eine Tabelle (so wie Excel).

Wenn man alle Werte eingeben hat, kann man auf Speichern drücken.

Aber jetzt kommt die Frage, es ich denke es wäre komfortabler wenn statt am Ende, jedes Mal wenn ein Wert in ein Inputfeld, Formular, Tabelle eingefügt wird, dieser Wert automatisch gespeichert wird.

So dass das Abspeichern am Ende praktisch entfällt.

  1. Lieber Georg,

    Du hast die Tags CSS und HTML verwendet. Mit diesen Mitteln ist Dein Vorhaben nicht umzusetzen. Du benötigst für die serverseitige Speicherung eine serverseitige Scriptsprache wie PHP, Ruby, Perl oder ähnliche. Außerdem benötigst Du im Browser eine programmierbare Intelligenz (JavaScript), die merkt, dass da jemand einen Wert in ein Eingabefeld eingetragen hat, um diesen an das serverseitige Script zur Speicherung zu melden.

    Was hast Du in Sachen JavaScript und serverseitiger Scriptsprache an Bord?

    Liebe Grüße

    Felix Riesterer

    1. Also PHP 😀😀 geht, und mit Javascript, 🤔 es muss ja jeder mal anfangen.

      1. Hallo Georg,

        okay. Hast Du den XMLHttpRequest schon mal angefasst? Sprich: AJAX Calls gemacht?

        Damit könntest Du das lösen. Du musst dann nur die change-Events der Eingabefelder behandeln. Im Eventhandler holst Du den Feldwert und schickst ihn per Ajax zum Server. Du musst nicht mal einen change-Handler pro Feld registrieren, das kannst Du auf dem Form machen. Die change-Events unterliegen dem Bubbling, d.h. du kannst in der target-Eigenschaft des Event-Objekts das geänderte Eingabefeld finden und musst dann je nach Eingabetyp entsprechend den Wert auslesen (checked-Eigenschaft bei Radiobuttons/Checkboxen, value-Eigenschaft bei Textfeldern oder Dropdowns).

        Das löst dann allerdings einen Hagen an HTTP Requests aus, sowas kann bei vielen Anwendern den Server in die Knie bringen.

        Wenn das für dein Know How zu grob gefasst war, erzähle bitte wo Du weiterführenden Erklärbedarf hast.

        Rolf

        --
        sumpsi - posui - clusi
        1. Lieber Rolf,

          Du musst dann nur die change-Events der Eingabefelder behandeln. [...]

          Das löst dann allerdings einen Hagen an HTTP Requests aus, sowas kann bei vielen Anwendern den Server in die Knie bringen.

          Du kennst unsere Diskussion von neulich zu diesen Fragen noch nicht?

          Liebe Grüße

          Felix Riesterer

          1. Hallo Felix,

            nein. Das ist das Vereinsforum, darauf habe ich als Nichtmitglied keinen Zugriff.

            Rolf

            --
            sumpsi - posui - clusi
            1. Hallo Rolf,

              nein. Das ist das Vereinsforum, darauf habe ich als Nichtmitglied keinen Zugriff.

              das lässt sich leicht ändern 😉

              Gruß
              Jürgen

            2. Lieber Rolf,

              nein. Das ist das Vereinsforum, darauf habe ich als Nichtmitglied keinen Zugriff.

              ach herrjeh! Darauf habe ich offensichtlich nicht geachtet. Mist! Also für Dich das Wesentlichste:

              Beim change-Event mag ich nicht, das bei Tastatureingabe erst aktualisiert wird, wenn man dem Input-Element den Focus nimmt. Ich hatte dazu schon mal einen Dummy-Button, weil das „Klick irgendwo hin“ die User verwirrt. [...]
              Beim Input-Event stört mich das „Geflacker“, weil bei jeder Ziffer aktualisiert wird [...]
              Das entspricht aber genau dem Verhalten mancher Dialogfelder von Non-Browser-Anwendungen. Zum Beispiel beim Eigenschaften-Dialog von eingefügten Grafiken in MS Word: Sobald du da den Prozentwert für die X-Skalierung änderst, ändert sich der Y-Wert augenlicklich proportional mit (und umgekehrt). Ähnlich in vielen Grafikprogrammen. Das ist also für die meisten Nutzer kein unbekanntes Verhalten. [...]
              Auf einer meiner Seiten habe ich daher in den input-Event-Handler eine Verzögerung eingebaut

              Liebe Grüße

              Felix Riesterer

              1. Hallo Felix,

                ok, der Argumentation kann ich folgen. Das input Event eignet sich aber auch eher nicht für ein Autosave - das wäre viiiel zu viel.

                Interessant könnte ein Eventhandler für change und input sein, der lediglich ein Flag "changed" setzt, und ein 10s Timer schickt im Hintergrund den aktuellen Stand an den Server. Trotzdem braucht man noch Logik, die sicherstellt, dass auch die letzten Änderungen gespeichert sind.

                Das muss man vermutlich mit einem beforeunload Handler lösen, wobei ich nicht weiß, ob der noch genug Zeit hat um einen POST abzusetzen.

                Rolf

                --
                sumpsi - posui - clusi
                1. Lieber Rolf,

                  ok, der Argumentation kann ich folgen. Das input Event eignet sich aber auch eher nicht für ein Autosave - das wäre viiiel zu viel.

                  dafür braucht es eine Funktion, die alle Eventhandler-Aufrufe abfängt und, wie Du richtig schreibst, nach einem Zeitlimit die von diesen Handlern eigentlich anzustoßende Funktionalität ausführt. @Gunnar Bittersmann führte dafür neulich eine debounce-Funktion an.

                  Liebe Grüße

                  Felix Riesterer

                  1. Hallo Felix,

                    guter Hinweis.

                    Aber da wäre ein Test interessant, wie sich debounce bei einem unload der Seite während der Wartezeit verhält. Ob gequeuete Timeout-Callbacks noch laufen. Vermutlich nicht.

                    Bei einem resize Handler ist das egal, bei einem Autosave nicht.

                    Rolf

                    --
                    sumpsi - posui - clusi
                    1. Lieber Rolf,

                      Bei einem resize Handler ist das egal, bei einem Autosave nicht.

                      guter Punkt! Das unload-Ereignis würde ich ohne die Bounce-Funktion dazwischen ausführen lassen.

                      Liebe Grüße

                      Felix Riesterer

                      1. Hallo Felix,

                        ich würde beforeunload nehmen. Bin gerade nicht ganz sicher ob es bei unload schon zu spät ist.

                        Rolf

                        --
                        sumpsi - posui - clusi
                        1. Lieber Rolf,

                          ich würde beforeunload nehmen. Bin gerade nicht ganz sicher ob es bei unload schon zu spät ist.

                          ich habe mich jetzt nicht genau damit befasst, weil ich solche Sachen noch nicht gemacht habe. Sicher ist Deine Wahl von beforeunload die bessere. Wenn mein User die Seite verlassen will, dann zwinge ich kein Ajax-getriggertes Speichern auf.

                          Liebe Grüße

                          Felix Riesterer

                2. Hallo Rolf,

                  ok, der Argumentation kann ich folgen. Das input Event eignet sich aber auch eher nicht für ein Autosave - das wäre viiiel zu viel.

                  in dem Zusammenhang würde mich mal interessieren, wie die Autosave-Funktion hier im Forum gelöst wurde? Weil kein Flackern keine gierigen Request, unscheinbar im Hintergrund und zuverlässig, also vorbildlich.

                  Gruss
                  Henry

                  --
                  Meine Meinung zu DSGVO & Co:
                  „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
                  1. Hallo Henry,

                    hier wird im localstorage gespeichert, nicht per Ajax, und meines Wissens auch nur per Timer. D.h. du hast keine Garantie dass bei einem irrtümlichen Ctrl+W statt Shift+W (mein Lieblingstypo und mein meist gehasster Shortcut, für den ich jemanden bei Microsoft oder Google würgen könnte) alle Eingaben gerettet sind.

                    Rolf

                    --
                    sumpsi - posui - clusi
                    1. Hallo Rolf,

                      Ctrl+W statt Shift+W (mein Lieblingstypo und mein meist gehasster Shortcut, für den ich jemanden bei Microsoft oder Google würgen könnte)

                      wenn du einen Schuldigen gefunden hast, sag mir Bescheid. Ich würde gern beim Würgen helfen. Alternativ: Mit Katzendreck erschießen.

                      Ciao,
                       Martin

                      --
                      Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
                    2. Hallo Rolf,

                      hier wird im localstorage gespeichert,

                      ah danke für die Info, dachte wäre serverseitig gelöst.

                      Gruss
                      Henry

                      --
                      Meine Meinung zu DSGVO & Co:
                      „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
      2. Lieber Georg,

        Also PHP 😀😀 geht,

        prima!

        Dann benötigst Du zwei Wege:

        1. Daten werden als komplettes Formular versandt.
        2. Ein Datum (Einzahl von Daten) wird via JavaScript zum Speichern übertragen

        Es stellt sich nun die Frage, wie das in Deiner Webapplikation genau aussieht. Wird beim Seitenaufruf genau ein Datensatz angesteuert (z.B. weil in der URL etwas spezifisches dazu steht), wenn die Seite mit dem Excel-artigen Formular aufgerufen wird, der dann beim Speichern mit den Daten gefüllt wird? Dann wären die zwei Wege relativ schmerzfrei umzusetzen.

        Wenn ein Seitenaufruf jedes Mal einen neuen Datensatz erzeugt, dann haben wir mit dem zweiten Weg ein Problem, da ein Speichern-Aufruf via JavaScript so ähnlich wie ein neuer Seitenaufruf ist.

        Verwendest Du eine Session? Damit kann man den aktuell zu bearbeitenden Datensatz in der Session festlegen, was dazu führt, dass egal ob Formular-ganz-speichern oder diesen-Einzelwert-speichern immer denselben Datensatz betrifft.

        und mit Javascript, 🤔 es muss ja jeder mal anfangen.

        Kein Problem! Wenn Du definiert hast, wie der POST-Request aussehen muss, den JavaScript für das Speichern eines Einzelwerts erzeugen soll, kannst Du die Eingabefelder mit entsprechenden Eventlistenern ausstatten, die in dem Moment feuern, in dem der Wert eingetragen wurde. Da hatten wir doch neulich eine Diskussion, welches Event sich da am besten eignet.

        Also möchtest Du erste Schritte in JavaScript machen. Das sollte Dich in etwa zu diesem Code hier führen:

        <!doctype html>
        <html lang="de">
          <head>
            <meta charset="utf-8">
            <title>online-Excel</title>
            <script>
        document.addEventListener("DOMContentReady", function () {
        
        // Mein JavaScript-Programm
        console.log("Hallo Welt!");
        
        });
            </script>
          </head>
          <body>
            ...
          </body>
        </html>
        

        Wenn Du das JavaScript in eine eigene Datei ausgliedern willst, dann könnte es noch übersichtlicher zu schreiben sein.

        Du willst alle Eingabefelder vom Typ <input type="number"> mit einem Eventlistener ausstatten, der beim input-Event feuert (siehe oben verlinkte Diskussion dazu). Die Funktion, die beim Ereignis ausgeführt wird, muss nun einen POST-Request absenden, den Dein PHP-Script versteht.

        Liebe Grüße

        Felix Riesterer

        1. Danke für die ganzen Antworten...

          ich fange jetzt mal an, alles was ihr geschrieben habt langsam zu verarbeiten. Ich werde mich mal an den ganzen Tipps versuchen und mein Ergebnis sodann veröffentlichen, wahrscheinlich mit noch mehr fragen.

          Georg

          *** Ich glaube ich geh in den Keller in das hinterste Eck und versteck mich. ***

  2. Moin,

    die Frage ist, wo die Eingaben gespeichert werden sollen. Da gibt es nämlich mehrere Möglichkeiten:

    1. im Browser
    2. im lokalen Dateisystem
    3. serverseitig

    (1) und (2) kannst Du komplett mit JavaScript abdecken.

    MFG

    1. Ich möchte die Daten in die MYSQL Datenbank schreiben, bzw. ändern.

    2. Hi there,

      die Frage ist, wo die Eingaben gespeichert werden sollen. Da gibt es nämlich mehrere Möglichkeiten:

      1. im Browser
      2. im lokalen Dateisystem
      3. serverseitig

      (1) und (2) kannst Du komplett mit JavaScript abdecken.

      Also, mein Javascript kann (2) sicher nicht, wenn man von Cookies und Web Storage einmal absieht...

      1. Hi there,

        die Frage ist, wo die Eingaben gespeichert werden sollen. Da gibt es nämlich mehrere Möglichkeiten:

        1. im Browser
        2. im lokalen Dateisystem
        3. serverseitig

        (1) und (2) kannst Du komplett mit JavaScript abdecken.

        Also, mein Javascript kann (2) sicher nicht, wenn man von Cookies und Web Storage einmal absieht...

        /* FileSaver.js
         * A saveAs() FileSaver implementation.
         * 2013-01-23
         * 
         * By Eli Grey, http://eligrey.com
         * License: X11/MIT
         *   See LICENSE.md
         */
        

        Demo

        MFG

        1. Hi there,

          ich verstehe - das ist nicht uninteressant, kannte den Trick noch nicht...

          1. Hi there,

            ich verstehe - das ist nicht uninteressant, kannte den Trick noch nicht...

            Im einfachsten Fall machste aus den Eingaben einen JSON-String und schickst den zum Browser. Speichern unter... geht da auch. Und über die FileAPI kannste das dann wieder einspielen.

            MFG

            1. Hi there,

              ich verstehe - das ist nicht uninteressant, kannte den Trick noch nicht...

              Im einfachsten Fall machste aus den Eingaben einen JSON-String und schickst den zum Browser. Speichern unter... geht da auch. Und über die FileAPI kannste das dann wieder einspielen.

              Was mich im Augenblick mehr interessiert ist die Frage, wieso mir das Teil in Chrome die Datei immer nur unter Files mit den Dateinamen "Download", "Download(1)" etc. speichert und nicht unter dem Dateinamen, den ich in der Zeile saveAs(blob,irgendeinDateiname...) angegeben habe. Hast Du eine Ahnung, woran das liegen könnte...?

      2. Hallo,

        1. im lokalen Dateisystem

        Also, mein Javascript kann (2) sicher nicht, wenn man von Cookies und Web Storage einmal absieht...

        meins schon. Der Trick besteht darin, einem Downloadlink als href die zu speichernden Daten als Blob zu geben, und dann den Download als click() auszulösen. Das Speichern erfolgt dann wie bei Downloads üblich.

        Gruß
        Jürgen

        1. Hi there,

          Also, mein Javascript kann (2) sicher nicht, wenn man von Cookies und Web Storage einmal absieht...

          meins schon. Der Trick besteht darin, einem Downloadlink als href die zu speichernden Daten als Blob zu geben, und dann den Download als click() auszulösen. Das Speichern erfolgt dann wie bei Downloads üblich.

          Interessant, ich verstehe. Gibts da irgendein Limit was die Dateigröße betrifft?

          1. Hallo,

            es gab mal im Chrome ein 2MB-Limit, aber das besteht nicht mehr. Ob es eine Grenze weiter oben gibt, habe ich noch nicht ausgelotet.

            Gruß
            Jürgen

            1. Hi there,

              es gab mal im Chrome ein 2MB-Limit, aber das besteht nicht mehr. Ob es eine Grenze weiter oben gibt, habe ich noch nicht ausgelotet.

              Also wenn Kai345 mit seinem Posting recht hat (wobei mir 2MB auch schon genügten) dann scheint damit ja so gut wie alles möglich.

              In diesem Lichte betrachtet würde das ein altes Programmierproblem meinerseits lösen. Was ich halt noch benötigte wäre zusätzlich quasi eine Art umgekehrter Weg: gibts Deiner Meinung nach irgendeine Möglichkeit, dem Browser mitzuteilen, daß ein bestimmter Vorgang im Dateisystem erfolgreich erledigt wurde?

              Konkret gehts darum, daß ich Animationen mit JS mache, und zwar dergestalt, daß jeweils ein Frame generiert wird und dann lös' ich einen POST auf einen auf dem selben System befindlichen Webserver aus, der wiederum ein PHP-Skript startet, das über einen exec-Befehl einen Screenshot macht;) Das ist genauso kompliziert wie es klingt und ich würd' mir die Geschichte mit dem Server gern ersparen; ich müßt nur irgendwie in Erfahrung bringen können, daß der Screenshot (den ich dann natürlich über einen anderen Weg auslösen kann) erfolgt ist...

              edit: hat sich fast erledigt, mir ist eingefallen, daß ich ja eine .js-Datei generieren kann, stellt sich nur mehr die Frage, wo die von JS gefunden werden kann und wie ich das abfrage, am besten vermutlich werf ich eine exception, wenn die js-Datei nicht existiert; thnx anyway...😉

          2. Interessant, ich verstehe. Gibts da irgendein Limit was die Dateigröße betrifft?

            Auf der github-Projekt-Seite des von pl vorgeschlagenen Scripts stehen unterschiedliche Angaben je nach Browser. z.B. 800MiB für den Fuchs, 2GB für Chrome ...

            das sollte eigentlich ausreichen.

            --
            Stur lächeln und winken, Männer!
        2. Hallo JürgenB,

          und dann den Download als click() auszulösen

          komplett ohne Userinteraktion?

          Rolf

          --
          sumpsi - posui - clusi
    3. @@pl

      die Frage ist, wo die Eingaben gespeichert werden sollen. Da gibt es nämlich mehrere Möglichkeiten:

      1. im Browser
      2. im lokalen Dateisystem
      3. serverseitig

      (1) und (2) kannst Du komplett mit JavaScript abdecken.

      (3) auch.

      LLAP 🖖

      --
      Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.