HTML Mehrseitiges Formular - zurück-Button

[Schumiel]

Hallo,

ich habe ein mehrseitiges Formular, indem sich pro Seite die form.action ändert. Dabei möchte ich auch, dass man zurück springen kann und übergebe die Werte mit Post.

Hier ein Beispiel:

<!-- Seite 1 -->
<f:form action="test2" name="test" object="{test}">
    <button type="submit">
        weiter
    </button>
</f:form>

<!-- Seite 2 -->
<f:form action="test3" name="test" object="{test}">
    <button onclick="history.back();return false;">
        zurück
    </button>
    <button type="submit">
        weiter
    </button>
</f:form>

<!-- Seite 3 -->
<f:form action="test4" name="test" object="{test}">
    <button onclick="history.back();return false;">
        zurück
    </button>
    <button type="submit">
        weiter
    </button>
</f:form>

Mit diesem Beispiel werden die ausgewählten Punkte nicht mehr mit übergeben. Daher möchte ich gern, dass der Zurück-Button die action aus der vorherigen Seite ausführt. Ich kann das sicher mit jQuery abfangen oder? Jedoch habe ich dafür noch keinen Lösungsweg gefunden. Hat jemand eine Idee oder Quelle für mich?

 

[FranzvonAssisi]

history.back überträgt keine POST-Daten, da musst du schon den Link reinschreiben, quasi ein zweiter "Submit"-Button, der aber zur vorherigen Seite verlinkt.

Ohne JavaScript wird das aber sehr friemelig...


Lg

 

[Joshinator]

Ich würde sagen es wäre fast sogar schon einfacher dir ein Tab-Layout zu bauen und die Forms selbst machen nichts (einfache Divs mit Input-Feldern).
Sondern der weiter-Button per ajax etwas an deine Action postet, und der nächste Tab auf geht. Wenn dann jemand in der zweiten Form zurück navigiert wird der erste Tab aufgemacht, dort sind noch die alten Werte drin weil die Werte nur per Ajax an deine Action gepostet wurden.
Wenn er dann wieder auf weiter klickt sind auch noch die Daten von vorher drin.

Wäre meiner Meinung nach einfacher und auch für den User kein Nachteil (weil er nicht jedes mal eine Seite lädt wenn er vor/zurück klickt).
Einziges Problem wäre wenn die einzelnen Seiten aufeinander aufbauen (z.B. Seite 1 für irgendein Element zu einem Dropdown was auf Seite 2 erscheinen muss). Aber das wäre auch machbar, musst ja nur im DOM die Elemente anpassen.

Bin mir auch fast sicher das du mit history.back() spätestens bei der 3ten Seite die "erneute Formularübertragung"-Meldung vom Browser bekommst. Weil die URL der zweiten Seite hat ja die Post-Daten der ersten gesendet hat.

 

[Schumiel]

FranzvonAssisi
Also sowas in der Art?

$('#myForm').submit(function (event)
{
    // aktuelle Seite auslesen
    ...
    
    var action = 'test2'; // die vorherige Seite
    $(this).attr('action', action);
});

Joshinator
Danke. Leider ist diese Option nicht mehr möglich, weil ich dieses Todo sehr weit nach hinten geschoben hatte. Dennoch ärgere ich mich grade, dass ich nicht auf die Idee gekommen bin, es vorher so zu machen, wie du beschreibst.

 

[RalphS]

Je nach Zielumgebung kannst Du Dir das ggfs. auch in ein Sessionobjekt schreiben. Was da dahintersteht ist ja erstmal egal. Das Sessionobjekt befindet sich auf dem Server; Du müßtest also beim Wechsel der Formularseiten die Sessioninformationen vom Server befragen... zB über AJAX, anders geht aber natürlich immer.

Oder Du machst einen auf REST und mußt dann aber jedes Mal das komplette Sessionobjekt mit allen Daten aller Formularseiten herumreichen. Weniger Streß für den Server, aber Du hast das Problem, daß jeder falsche Klick dafür sorgt, daß alle Formulareingaben unwiederbringlich hinüber sind.

 

[[ChAoZ]]

Eingaben nach jedem Submit und Validierung zwischenspeichern (Session).
Beim Laden der Seite die Daten aus der Session holen und in die Felder schreiben (Autofill).

 

[Schumiel]

Oder mit ViewHelper, oder?

 

[ayngush]

So etwas nennt man multi step form und wird eigentlich über JavaScript und Fieldsets / Div-Container, die ein- und ausgeblendet werden gelöst. Erst im letzten Schritt sendet man dann das ganze Formular an den Service.

Siehe: https://www.w3schools.com/howto/howto_js_form_steps.asp

Mit history.pushState(...) kann man sich beim Weiterschalten auch die Historie so aufbauen, dass die mit der gewohnten "Zurück-Funktion" der Browser für die einzelnen Schritte funktioniert.

 

[Madman1209]

Hi,

kann ayngush nur zustimmen, das wäre eine richtig saubere und moderne Lösung.

VG,
Mad