JavaScript Formulardaten merken

[da_freak]

Hallo,

ich formuliere meine Frage anhand eines konkreten Beispiels. Ich will, dass sich ein Formular die Daten merkt, die darin eingegeben wurden. Ein Absendebutton oder ähnliches wurde noch nicht geklickt; die Formulardaten wurden noch nicht verarbeitet. Z.B. soll das der Fall sein, wenn der User aus Versehen die Seite neu lädt oder den Zurückbutton des Browser betätigt oder das Zurück per Maustaste auslöst. Konkret zu sehen ist das bei Klamm (z.B. die textarea bei den Kommentaren oder im Loginformular das input feld für die emailadresse ("PW vergessen")) oder hier im Forum (das Formular zum Erstellen eines neuen Threads) wenn der Link, über den man auf die Seite gekommen ist geklickt wird, sind die Felder wieder leer.

Wie wurde das umgesetzt? Mir ist klar, dass ich mir Formulardaten in die Session schreiben kann. Aber in diesem Fall, wurde ja noch garnichts mit dem Formular gemacht. Wenn ich mir ein Formular in einer einfachen HTML Seite erstelle, geht das auch, aber ich baue mir mein Formular über eine php Seite auf. Für mich deshalb nachvollziehbar, weshalb die Seite komplett neu geladen wird. Aber bei Klamm rufe ich ja auch eine php-Datei auf, oder? Also, wo liegt da der Trick?

Freue mich schon auf eure Antworten

 

[theHacker]

Das macht doch normal der Browser

Firefox tut es automatisch. Seitdem ich Opera nutze, weil Firefox auf meinem System zu lahm läuft, ärgere ich mich, wenn ich aus Versehen die Mausgeste für Zurück mach, weil der Opera setzt dir dann nämlich ne leere Seite vor, wenn du vorher mit HTTP POST auf die Seite gelangt bist.

Wenn du das mit JavaScript selber machen willst, müsstest du jede Veränderung an den Textfeldern abfangen und per AJAX an den Server senden. Oder direkt clientseitig im Keks speichern, allerdings weiß ich nicht, ob das klappt, da hierzu ja n neuer Request ausgeführt werden müsste, um das zu verarbeiten. Evtl. funktioniert die Cookie-Variante nicht, wenn du nur Zurück machst und der Browser aus dem Cache lädt.

 

[da_freak]

Okay, das ist Browserabhängig. Check.

Aber wie macht das klamm bei besagten Seiten? Ich habe eine php Seite, aber der Formularinhalt bleibt bei einem reload erhalten, wird wie eine html Seite behandelt.

Ansonsten werde ich dann ein Merken der Formulardaten nur vornehmen, wenn der User das Formular schon abgesendet hat, und bewusst zurückkehren will oder muss.

 

[theHacker]

Aber wie macht das klamm bei besagten Seiten?

Ich vermute gar nicht, da das auch hier der Browser macht. Das Input-Element ist nicht besonders ausgezeichnet.

Ich habe eine php Seite, aber der Formularinhalt bleibt bei einem reload erhalten, wird wie eine html Seite behandelt.

Der Satz is in sich sinnlos; kp, was du damit meinst

 

[da_freak]

Das schloss sich an den ersten Satz an: kurz um, ich will das genauso haben wie Klamm. Denn dass sich Klamm die Formulardaten merkt, ist denke ich nicht vom Browser gemacht. Denn wenn ich mir selbst ein Formular über eine php Datei ausgebe, oder bspw. auf diese Seite gehe, funktioniert dieses merken eben nicht. Irgendetwas muss klamm da geändert haben.

 

[Renegade]

Einfach die Variable mit dem richtigen Request (z.B. Post o. Get) abfangen und dann ins Formularfeld ausgeben? Meinst du das so?

 

[theHacker]

Denn wenn ich [...] bspw. auf diese Seite gehe, funktioniert dieses merken eben nicht.

Also bei mir geht das. Ich tipp was ein, klick "aus Versehen" einen Link, geh zurück und die Formulardaten sind alle noch drin. Wie gesagt: macht der Browser, du musst da gar nix tun.

 

[da_freak]

Nein, es geht mir drum, dass die Formulareingaben erhalten bleiben, wenn der User (wahrscheinlich aus Versehen) das Fenster neu lädt oder die zurückfunktion des Browser betätigt und dann wieder per "vor" auf die Seite zurückkehrt. Das Formular wurde dann ja nicht abgeschickt.

@tH: Okay, das überzeugt mich. Ich frage mich dann allerdings, warum das bei mir nich bei jeder Seite funktioniert, so wie bei dir.

 

[ice-breaker]

Das meint er aber nicht
Klick mal auf Antworten, gib einen Titel ein und drücke F5, der Browser reloadet die Seite aber der eingegebene Titel steht noch immer da, das ist aber nicht überall so.

 

[theHacker]

Klick mal auf Antworten, gib einen Titel ein und drücke F5, der Browser reloadet die Seite aber der eingegebene Titel steht noch immer da, das ist aber nicht überall so.

Bei F5 wird die Seite komplett neu geladen. Formulareingaben gehen dabei verloren (zumindest bei mir so; würde ich auch in anderen Browsern erwarten).

Nein, es geht mir drum, dass die Formulareingaben erhalten bleiben, wenn der User (wahrscheinlich aus Versehen) das Fenster neu lädt oder die zurückfunktion des Browser betätigt und dann wieder per "vor" auf die Seite zurückkehrt. Das Formular wurde dann ja nicht abgeschickt.

Bei Zurück-Vor, wie du es schilderst, sind die Angaben aber - wie ich schon schrieb - noch drin, ohne, dass du als Programmierer was dazutun musst.

 

[theHacker]

@tH: Okay, das überzeugt mich. Ich frage mich dann allerdings, warum das bei mir nich bei jeder Seite funktioniert, so wie bei dir.

Finde ne Seite, wo es nicht funktioniert und finde heraus, wieso es nicht geht bzw. in welchem Browser es geht

Ich tipp mal drauf - reine Spekulation -, dass du nur funktioniert, wenn die Seite im Cache is. Deaktiviert man den Cache, werden die Formulareingaben vermutlich auch nicht gespeichert. Ich probier das gleich mal.

Opera (Cache an/aus): speichert
IE9 (Cache an): speichert nicht
FF 3.6.8 (Cache an): speichert nicht
FF4b6 (Cache an): speichert nicht

Fazit: Opera speichert, andere nicht. Mit dem Cache hats nix zu tun. Das Feature jetzt von Seiten der Webseite nachzubauen, fänd ich Zeitverschwendung. Besser n Vorschlag an die Browserhersteller (ok, M kann man sich sparen ) machen

 

[ice-breaker]

Bei F5 wird die Seite komplett neu geladen. Formulareingaben gehen dabei verloren (zumindest bei mir so; würde ich auch in anderen Browsern erwarten).

teilweise scheint es so zu sein, teilweise auch nicht. Bei dem genannten Beispiel auf Klamm "merkt" sich der Browser wirklich was in dem Formular drinne stand, bei Seiten von mir nicht.

 

[theHacker]

Bei dem genannten Beispiel auf Klamm "merkt" sich der Browser wirklich was in dem Formular drinne stand, bei Seiten von mir nicht.

Also wenn ich hier im Opera in das PW-Vergessen-Feld was eintrag und hau auf F5, is das Feld danach wieder leer.

 

[TerraTux]

BTW:
Zurück/Vor im IE8 bleibt der Text hier erhalten, bei F5 nicht.
Zurück/Vor im FF UND bei F5 bleibt der Text erhalten.

Ist also browserabhängig, aber wohl nicht so gewollt...

Wenn Du diese Möglichkeit für alle haben möchtest, dann würde ich bei jedem KeyUp (oder beim verlassen des Feldes) den Inhalt in ein Cookie speichern. Beim Reload wird der Cookieinhalt im Request mitgeschickt, diesen kannst Du in PHP abgreifen und die Felder vor der Auslieferung ausfüllen (ODER beim onLoad-Event per Javascript wieder reinschreiben lassen).

Frage nur, gibt es irgendwelche Requests oder Events, bei "zurück" und "wieder vor", bzw. Linkklick und "zurück"? Irgendwas gab es doch, das beim verlassen einer Seite ausgelöst wird(??).

Gruß

 

[ice-breaker]

Tatsache, im Opera hab ich auch dein beschriebenes Verhalten, im Firefox das von da_freak

 

[flaschenkind]

asdfasdf

Bei mir bleiben die Daten hier bei klamm bei F5 und Vor/Zurück auch gespeichert.

Also wenn ich hier im Opera in das PW-Vergessen-Feld was eintrag und hau auf F5, is das Feld danach wieder leer.

Passwortfelder werden generell immer geleert, so meine Erfahrung.

 

[Bububoomt]

@flaschenkind
Nicht Passwortfeld, ging um Passwortvergessen-feld (also wohl email/Benutzername)

Frage nur, gibt es irgendwelche Requests oder Events, bei "zurück" und "wieder vor", bzw. Linkklick und "zurück"? Irgendwas gab es doch, das beim verlassen einer Seite ausgelöst wird(??).

Gruß

onunload?

Also das die Browser unterschiedliche verhalten haben, habe ich shcon bemerkt, vorallem was dann <Select> angeht, im FF bleibt das ausgewählte nach einem F5 erhalten. (doof wenn man ein onchange drauf hat).

Ich würds mit JS+Cookie machen.

 

[flaschenkind]

@flaschenkind
Nicht Passwortfeld, ging um Passwortvergessen-feld (also wohl email/Benutzername)

Asche auf mein Haupt

Also das die Browser unterschiedliche verhalten haben, habe ich shcon bemerkt, vorallem was dann <Select> angeht, im FF bleibt das ausgewählte nach einem F5 erhalten. (doof wenn man ein onchange drauf hat).

Bei sowas habe ich immer eine Funktion, die ich sowohl beim onchange aufrufen, als auch beim Seitenreload. Man muss dann in der Funktion halt immer den aktuellen Wert auslesen und kann sich den nicht per Parameter übergeben lassen.

 

[da_freak]

Okay, wir haben festgestellt, dass das scheinbar von Browser zu Browser und von Seite zu Seite völlig willkürlich passiert. Mal angenommen, ich wollte das so umsetzen:
- Daten in ein Cookie oder die Session speichern ist kein Problem
- Das auslesen der Daten und erneutes in-Formular-schreiben ebenso wenig

Aber wie unterscheide ich, ob der User F5/Vor/Zurück betätigt hat oder den Link auf die Seite erneut geklickt hat. In letzterem Fall wäre es nämlich wohl in jedem Browser üblich, ein leeres Formular erscheint.

 

[TerraTux]

Aber wie unterscheide ich, ob der User F5/Vor/Zurück betätigt hat oder den Link auf die Seite erneut geklickt hat. In letzterem Fall wäre es nämlich wohl in jedem Browser üblich, ein leeres Formular erscheint.

Da könnte man die Daten im Cookie vllt. beim Submit wieder löschen. Das die Daten verschwinden, wenn das Form ausgefüllt ist, die Seite geschlossen, später wieder aufgerufen wird, möglicherweise über die TTL. Abschätzen wie lange man ungefähr für das Formular benötigt + ein "paar Karenzsekunden", und danach die Cookie-Daten für ungültig erklären...