Back Button Griff Eine dynamische Form

https://stackoverflow.com/questions/1724739

19-09-2019
|

Frage

habe ich eine Form mit einer Reihe von Textfeldern. Der Benutzer (über die JavaScript) kann eine beliebige Anzahl von Textfeldern Form hinzuzufügen. das Formular aus und drücken Sie die Taste Zurück nur die Form Displays mit den Feldern, die auf der ursprünglichen Form waren, als es zuerst gemacht wurde (alle hinzugefügt Textfelder verloren) Nach dem Absenden. Was ist der beste Weg, die Zurück-Taste machen Sie das Formular in dem Zustand zu ermöglichen, wenn der Benutzer es eingereicht? Alle Ideen sind willkommen, einige Dinge, die ich habe versucht, sind:

die Formulardaten in einem Cookie anlegen (dies für ein paar nicht große Arbeit Gründe, aber die häufigste Todesursache für mich dass Cookies sind auf 4K begrenzt Größe)
Legen Sie die Formulardaten in einer Sitzung
Senden Sie das Formular über AJAX und verwalten dann die Geschichte

Danke für die Hilfe. Ich habe eine Testform auf meiner Website veröffentlicht unter http://fishtale.org/formtest/f1.php . Auch hier ist eine einfache Form das Verhalten aufweist ich erwähnt:

<form action="f2.php" method="post">
<input type="text" name="text[]" id="text1"/>
<input type="submit" name="saveaction" value="submit form" />
</form>

<a href="f2.php" id="add_element">Add Form Element</a>

<script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" ></script>

<script type="text/javascript" >
    $('#add_element').click(function (event) {
        event.preventDefault();
        $('#text1').after('<input type="text" name="text[]" />');
    });
</script>

Dies ist vergleichbar mit einer Frage, die ich vor einiger Zeit geschrieben, Best Way-Knopf für Back To Leave Formulardaten sind jedoch diese Form der Elemente vom Anwender geändert.

Lösung

Ich kann keine prewritten Bibliothek für diese finden, aber ich bin sicher, dass sein vor gelöst. Wenn ich es mir hätte, würde ich diesen Ansatz:

Mit den Befehlsmuster , so dass jedes Verfahren, das die Seite der Benutzeroberfläche modifiziert durch Hinzufügen Kontrollen rufen auch eine AJAX-Methode, um die Methode aufgerufen (Text Javascript Darstellung) auf eine Warteschlange in der Sitzung des Servers gespeichert zu drücken.
Nach dem Körper schließt ONLOAD, eine AJAX-Methode verwenden, die Server-Sitzung für eine Befehlswarteschlange für die Seite zur Abfrage des Benutzer ist. Wenn man abgerufen wird, eval nur jedes Mitglied der Warteschlange der Seite des UI in der gleichen Reihenfolge für den Wiederaufbau der Benutzer es getan haben.

Beachten Sie bei diesem Ansatz Sie aufnehmen, nicht nur Ergänzungen der Kontrollen, sondern Umzüge auch. Sie werden getrennte Zustand Halter für Benutzereingaben Kontrollen erfordern, wie Textfelder (Sie werden wahrscheinlich auch Notwendigkeit serverseitige Sitzung mit AJAX-Methode Zugriff).

Andere Tipps

Wie wäre es ein <input type="hidden"> (ohne name oder außerhalb der Form, so dass es nicht vorgelegt wird) zu schaffen, in dem Sie eine codierte Liste der zusätzlichen Felder speichern hinzuzufügen und ihre Werte? Während der Browser erinnert nicht neu hinzugefügte Felder auf ‚zurück‘, es wird die Werte verborgener Felder erinnern, die von Anfang an in Form waren.

Hier ist ein Beispiel, das die zusätzlichen Felder auf dem Dokument Entladen speichert und ruft sie auf bereit:

<input type="hidden" id="remembertexts" />

<form action="http://www.google.com/" method="get">
    <div id="texts">
        <input type="text" name="text[]" value="" />
    </div>
    <div>
        <input type="submit" />
        <input type="button" id="addtext" value="+" />
    </div>
</form>

<script type="text/javascript">

    // Add new field on button press
    //
    $('#addtext').click(function() {
        addInput('');
    });

    function addInput(text) {
        $('#texts input').eq(0).clone().val(text).appendTo('#texts');
    };

    // Store dynamic values in hidden field on leaving
    //
    $(window).bind('beforeunload', function() {
        var vals= [];
        $('#texts input').each(function() {
            vals.push(encodeURIComponent(this.value));
        });
        $('#remembertexts').val(vals.join(';'));
    });

    // Retrieve dynamic values on returning to page
    //
    $(function() {
        var extratexts= $('#remembertexts').val().split(';').slice(1);
        $.each(extratexts, function() {
            addInput(decodeURIComponent(this));
        });
    });
</script>

Weitere Informationen:

Sie können form.onsubmit statt window.onbeforeunload verwenden, wenn Sie es brauchen nur Werte über eine Vorlage zu erinnern. onunload funktioniert nicht wie einige Browser bereits die alten Form Werte gespeichert haben, bevor das Ereignis eintritt.
In Firefox die Position des verborgenen Eingangs ist wichtig. Aus irgendeinem Grund, wenn Sie es unter den dynamisch hinzugefügt Felder setzen, wird Firefox verwirrt darüber, welche Eingangs es ist und nicht den Wert erinnern.
Dieses Beispiel funktioniert nicht in Opera. Es kann in Opera gemacht werden, um zu arbeiten, aber es ist ein Schmerz. Opera Berufung von Be- und Entladen Ereignissen ist widersprüchlich, so dass Sie onsubmit stattdessen verwenden, oder das versteckte Feld auf einem Abfrageintervall einstellen, oder so etwas. Schlimmer noch, wenn Opera vorherige Form-Feldwerte erinnert, es füllt eigentlich nicht, sie in bis nach onload gefeuert hat! Dies bewirkt, dass schon viele, viele Form-Scripting-Probleme. Sie können arbeiten, um das durch eine kleine Auszeit in Ihrem onload setzen warten, bis die Form Wert in gegangen, wenn Sie Opera Kompatibilität benötigen.

In guten Browsern können Sie es perfekt einfach durch haben nicht funktioniert es brechen .

Firefox 1.5 Anwendungen in-Speicher-Caching für ganze Web-Seiten, einschließlich ihren JavaScript-Staaten, für eine einzelne Browser-Sitzung. Geht rückwärts und vorwärts zwischen besuchten Seiten erfordert keine Seite geladen und die JavaScript-Zustände werden beibehalten. Quelle

Dies wird unterstützt in Opera und WebKit zu. Jedoch DOM-Cache ist nur möglich, in denen Sie die Regeln halten:

Verwenden Sie onunload nicht, onbeforeunload.
Verwenden Sie Cache-control: no-store oder must-revalidate nicht.
In PHP müssen Sie session.cache_limiter von patently_ridiculous ändern (ich glaube, sie buchstabieren es nocache) zu none.
```
session_cache_limiter('none');
```
Leider HTTPS ist auch aus.

Wenn Sie nicht über Browser zwingen, die Seite neu zu laden, werden sie nicht. Sie werden halten das DOM und seine Werte unverändert, genau wie RFC 2616 schlägt .

Doch , wenn Sie Platz freuen, die Daten zu verstauen, gibt es unglaublich cleveren Hack - window.name können Megabyte an Daten speichern. Es ist nicht an den Server gesendet, und es wird nicht zwischen Fenstern gemeinsam benutzt werden.

Es gibt auch Flash-Cookies und HTML 5 localStorage in IE8 und Safari 4 umgesetzt wird.

Schritt 2:. Die Skript Verarbeitung der Form legt die Werte in ein Array eingegeben und speichert das Array in ein Session-Variable (oder Text / db / was auch immer Sie für angemessen)

Schritt 1:. Das Skript, das die Form gibt fügt eine Javascript (die wiederum füllt in Form), wenn die Session-Variable gefunden wird (und es wird auch das Session-Variable)

Sie können Ihre eigenen Back-Button am oberen Rand der Webseite und machen es größer und schöner als die Standard-Web-Browser zurück Taste.

Unter der Haube könnte Ihr Code wissen, was der vorherige Zustand war und zurück wechseln oder wenn es kein vorheriger Zustand ist, kann man vielleicht die Back-Funktion des Browsers aufruf?

Block der Verwendung der Zurück-Taste. Wenn die Zurück-Taste gedrückt wird, rerender der vorherigen Seite für den Benutzer mit den neuen Feldern enthielt, entweder sichtbar, wenn der Sinn macht, oder versteckt. So kann der Benutzer in der Lage, die normalerweise die Zurück-Taste verwenden, und Sie haben die volle Kontrolle über das Aussehen der ‚‘ zurück ‚‘ Seite.

In Ihrem speziellen Anwendungsfall, brauchen Sie nur die Seite mit allen Feldern sichtbar und gefüllt zu machen mit den Werten, die eingereicht wurden.

Dies ist ein gutes Muster für jeden Assistenten Art von Prozess zu folgen, wo Sie eine Folge von Formen für den Benutzer zu füllen bieten und sie können wählen, um eine vorherige Form zurück zu gehen.

Um es ganz klar zu machen, schlage ich vor, dass Sie verwenden diese Beratung über die onUnload Event Capturing Trigger Formularübermittlung (so dass Sie die eingegebenen Werte erhalten) und die vorherige Seite rerender dass „zurück“ würde angezeigt haben (ohne die Werte). Die einzige Alternative ist Ajax zu verwenden, um die eingegebenen Werte jedes Mal, wenn sich der Benutzer ein Feld schicken und dann mit dem Server über AJAX jede Seite Prüfung müssen zusätzliche Werte Display abgerufen werden.

Hier sind einige weitere Seiten, die Kontrolle über die Funktion der Zurück-Taste und mit der unload Ereignis discuss nehmen, um Formulardaten zu bestehen:

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow