Ich versuche, den Druckknopf zum Senden meines Formulars zu erfassen. Wenn das Formular gesendet wird, wird die Seite aktualisiert und es werden einige ausgeblendete Felder angezeigt. Ich möchte erfassen, ob das Formular zuvor gesendet wurde oder nicht, und wenn es beim erneuten Laden gesendet wurde, möchte ich die ausgeblendeten Felder einblenden. Ich habe versucht, eine globale Variable zu verwenden, um dies zu erreichen, konnte sie jedoch nicht ordnungsgemäß ausführen.
Folgendes habe ich versucht:
var clicked = false;
$(document).ready(function() {
$("input[type='submit'][value='Search']").attr("onclick", "form.act.value='detailSearch'; clicked = true; return true;");
if (clicked == true) {
// show hidden fields
} else {
// don't show hidden fields
}
});
Irgendwelche Vorschläge, was mit diesem Code nicht stimmt?
javascript
jquery
form-submit
persistent-storage
Neophile
quelle
quelle
preventDefault
auf dersubmit
Veranstaltung (anstelle der, dieclick
Sie verwenden.)Antworten:
Da HTTP zustandslos ist, werden bei jedem Laden der Seite die Anfangswerte aller in JavaScript festgelegten Elemente verwendet. Sie können in JS keine globale Variable festlegen und diesen Wert nach dem erneuten Laden der Seite einfach beibehalten.
Es gibt verschiedene Möglichkeiten, den Wert an einem anderen Ort zu speichern, damit Sie ihn beim Laden mit JavaScript initialisieren können
Abfragezeichenfolge
Beim Senden eines Formulars mit der
GET
Methode wird die URL mit einer Abfragezeichenfolge (?parameter=value&something=42
) aktualisiert . Sie können dies nutzen, indem Sie ein Eingabefeld im Formular auf einen bestimmten Wert setzen. Dies wäre das einfachste Beispiel:Beim ersten Laden der Seite wird keine Abfragezeichenfolge festgelegt. Wenn Sie dieses Formular senden, werden die
name
und dievalue
Kombination der Eingaben in der Abfragezeichenfolge als übergebenclicked=true
. Wenn die Seite mit dieser Abfragezeichenfolge erneut geladen wird, können Sie überprüfen, ob auf die Schaltfläche geklickt wurde.Um diese Daten zu lesen, können Sie beim Laden der Seite das folgende Skript verwenden:
( Quelle )
Die Fähigkeit, dies zu verwenden, hängt davon ab, wie Ihr Formular derzeit funktioniert. Wenn Sie bereits einen POST verwenden, kann dies problematisch sein.
Darüber hinaus ist dies für größere Datenmengen nicht optimal. Das Weitergeben einer Zeichenfolge ist keine große Sache, aber für Arrays und Datenobjekte sollten Sie wahrscheinlich Web Storage oder Cookies verwenden. Während sich die Details in den einzelnen Browsern geringfügig unterscheiden, liegt die praktische Grenze für die URI-Länge bei etwa 2000 Zeichen
Webspeicher
Mit der Einführung von HTML5 haben wir auch Web Storage erhalten, mit dem Sie Informationen über Seitenladungen hinweg im Browser speichern können. Es gibt
localStorage
Daten, die Daten für einen längeren Zeitraum speichern können (solange der Benutzer sie nicht manuell löscht) undsessionStorage
die Daten nur während Ihrer aktuellen Browsersitzung speichern. Letzteres ist für Sie hier nützlich, da Sie nicht möchten, dass "angeklickt" auf "true" gesetzt bleibt, wenn der Benutzer später zurückkommt.Hier habe ich den Speicher für das Button-Klick-Ereignis festgelegt, aber Sie können ihn auch an Submit oder etwas anderes binden.
Wenn Sie dann die Seite laden, können Sie überprüfen, ob sie wie folgt eingestellt ist:
Obwohl dieser Wert nur während dieser Browsersitzung gespeichert wird, möchten Sie ihn möglicherweise früher zurücksetzen. Verwenden Sie dazu:
Wenn Sie ein JS-Objekt oder -Array speichern möchten, sollten Sie dies in eine Zeichenfolge konvertieren. Gemäß der Spezifikation sollte es möglich sein, andere Datentypen zu speichern, dies ist jedoch in allen Browsern noch nicht korrekt implementiert.
Die Browserunterstützung ist ziemlich gut, daher sollten Sie sicher sein, dies zu verwenden, es sei denn, Sie müssen wirklich alte / undurchsichtige Browser unterstützen. Web Storage ist die Zukunft.
Kekse
Eine Alternative zu Web Storage ist das Speichern der Daten in einem Cookie. Cookies werden hauptsächlich zum Lesen von Datenservern erstellt, können aber auch für rein clientseitige Daten verwendet werden.
Sie verwenden bereits jQuery, wodurch das Setzen von Cookies sehr einfach ist. Auch hier verwende ich das
click
Ereignis, kann aber überall verwendet werden.Dann können Sie beim Laden der Seite den Cookie folgendermaßen lesen:
Da Cookies in Ihrem Fall über Sitzungen hinweg bestehen bleiben, müssen Sie sie deaktivieren, sobald Sie alles getan haben, was Sie damit tun müssen. Sie möchten nicht, dass der Benutzer einen Tag später zurückkommt und immer noch
clicked
auf true gesetzt ist.(Eine Nicht-jQuery-Methode zum Setzen / Lesen von Cookies finden Sie hier )
Ich persönlich würde ein Cookie nicht für etwas Einfaches wie das Erinnern an einen angeklickten Status verwenden, aber wenn die Abfragezeichenfolge keine Option ist und Sie wirklich alte Browser unterstützen müssen, die sessionStorage nicht unterstützen, funktioniert dies. Sie sollten dies zuerst mit einer Überprüfung auf sessionStorage implementieren und nur dann die Cookie-Methode verwenden, wenn dies fehlschlägt.
Fenstername
Obwohl dies für mich wie ein Hack erscheint, der wahrscheinlich vor localStorage / sessionStorage entstanden ist, können Sie Informationen in der
window.name
Eigenschaft speichern :Es können nur Zeichenfolgen gespeichert werden. Wenn Sie also ein Objekt speichern möchten, müssen Sie es wie im obigen
localStorage
Beispiel stringifizieren :Der Hauptunterschied besteht darin, dass diese Informationen nicht nur über Seitenaktualisierungen, sondern auch über verschiedene Domänen hinweg gespeichert werden. Es ist jedoch auf die aktuelle Registerkarte beschränkt, in der Sie sich befinden.
Dies bedeutet, dass Sie einige Informationen auf Ihrer Seite speichern können. Solange der Benutzer auf dieser Registerkarte bleibt, können Sie auf dieselben Informationen zugreifen, selbst wenn er zu einer anderen Website und zurück navigiert. Im Allgemeinen würde ich davon abraten, dies zu verwenden, es sei denn, Sie müssen domänenübergreifende Informationen während einer einzelnen Browsersitzung speichern.
quelle
window.name
). Es kann genau das tun, was Sie brauchen, ohne Cookies / localStorage zu verwenden.Versuchen Sie es mit
$.holdReady()
,history
quelle
Verwenden
localeStorage
odersessionStorage
scheint die beste Wahl zu sein.Anstatt die
clicked
Variable im Globle-Bereich zu speichern, speichern Sie sie folgendermaßen:quelle
Sie könnten dies versuchen:
quelle