"Create oder update" Formular Verhalten beim Zurückschlagen Button

8

Ich habe den folgenden Workflow auf einer Website:

  1. Ein Benutzer John Doe erklärt eine Firma über Formular 1 (Felder: Name, Hauptsitz)
  2. Nachdem John Doe (HTTP POST) Formular 1 eingereicht hat, wird er (HTTP 302) an das Unternehmensformular 2 mit zusätzlichen rechtlichen Informationen über das Unternehmen weitergeleitet.

Das Problem ist, wenn John Doe in Schritt 2 auf den Zurück-Button seines Browsers klickt, landet er auf dem Formular 1, wobei die Daten vom Browser ausgefüllt werden (mit den Werten, die er bereits eingegeben hat) tu).

John Doe könnte dann denken, dass er dieses Formular verwenden kann, um einige Informationen zu aktualisieren (zB einen Tippfehler im Namen des Unternehmens zu korrigieren), während er tatsächlich eine neue Firma erstellt, wie wir es auf der Serverseite nicht wissen ob er eine neue Firma deklarieren oder die gerade erstellte aktualisieren möchte.

Kennen Sie eine einfache Lösung, um dieses Problem zu lösen?

    
Weier 14.02.2017, 18:37
quelle

7 Antworten

1

Ich denke, es ist benutzerfreundlicher, wenn der Benutzer zum vorherigen Formular zurückkehren und es aktualisieren kann (anstatt das beschriebene Verhalten zu verhindern). Ich benutze in den meisten Fällen ähnliche Möglichkeiten, um das beschriebene Problem zu behandeln:

  1. Nehmen wir an, dass sich der Benutzer auf der Seite /some-page befindet, die die Schaltfläche "Create new company" enthält. Wenn der Benutzer diese Seite öffnet, wird auf der Serverseite die spezielle Methode createOrFindCompanyDraft() ausgeführt. Diese Methode erstellt einen neuen "Entwurf" des Unternehmens in der Datenbank (nur für den aktuellen Benutzer). Zum Beispiel hat der Entwurfsdatensatz den Primärschlüssel id=473 . Wenn Sie diese Methode erneut ausführen, wird derselbe Datensatz mit dem id=473 (mit dem Status "Entwurf") zurückgegeben. "Draft" -Datensatz sollte nicht auf anderen Schnittstellen angezeigt werden. Und "Create new company" hat link /company/common/473 .

  2. Wenn der Benutzer zu /company/common/473 geht, wird Formular 1 angezeigt, das aus dem "Entwurf" Datensatz gefüllt wird. Beim ersten Mal wird der Benutzer ein leeres Formular sehen. Technisch wird der Benutzer den vorhandenen Datensatz aktualisieren, aber Sie können den Titel "Create new company" auf der Seite anzeigen.

  3. Dann gehen Benutzer zu Formular 2, zum Beispiel, /company/legal-info/473 , Sie erstellen einen ähnlichen Entwurf Datensatz für das Formular (ähnlich wie Schritt 1).

  4. Wenn der Benutzer das Formular 2 abschickt, entfernt er den Status "Entwurf" aus dem Datensatz id=473 (und alle zugehörigen Datensätze).

  5. Beim nächsten Öffnen der Seite /some-page des Benutzers wird ein neuer Datensatz für den aktuellen Benutzer erstellt.

Der Browserverlauf enthält:

  • /some-page
  • /company/common/473
  • /company/legal-info/473
  • /some-page2

Ich mag diesen Ansatz, weil alle Formulare nur Datensätze aktualisieren. Sie können mehrmals zum vorherigen / nächsten Formular wechseln (z. B. "Zurück" / "Vorwärts" -Browser-Schaltflächen). Sie können den Browser schließen und nicht ausgefüllte Formulare morgen öffnen. Auf diese Weise ist keine zusätzliche Manipulation mit dem Browserverlauf erforderlich.

    
IStranger 24.02.2017, 12:41
quelle
3

Verwenden Sie nach dem Laden der Seite Javascript / jquery-Skript, um alle Eingaben zu leeren. Dies verhindert Verwirrung bei der "Aktualisierung der Firma".

jQuery würde etwa so aussehen:

%Vor%     
Craz1k0ek 17.02.2017 15:14
quelle
1

Sie können die Situation auch behandeln, indem Sie den Browserverlauf bearbeiten Beim Laden von Formular 2 und übergeben Sie die CompanyId, die beim Senden von Formular 1 generiert wurde, mit Querystring. Damit Sie das Unternehmen als Benutzer aktualisieren können

Angenommen, John übergibt form1.html, wird eine eindeutige CompanyId "1001" generiert und zu form2.html umgeleitet. Beim Laden von form2 können Sie den Browserverlauf form1.html? FirmaID = 1001 mit

ändern %Vor%

Wenn der Benutzer jetzt auf die Schaltfläche Zurück klickt, wird das Formular erneut gesendet. Sie können in Querystring nach CompanyID suchen und das Unternehmen aktualisieren.

    
Tej Patil 24.02.2017 05:09
quelle
0

Eigentlich habe ich mir einen Trick ausgedacht, um das "create on first post, update after" -Verhalten zu erhalten (genau wie der Benutzer denkt, dass er sich verhält).

Nehmen wir an, das Formular für Schritt 1 befindet sich unter der URL /create_company/ . Dann könnte ich auf dieser Seite einen zufälligen Code XXX generieren und auf /create_company/?token=XXX umleiten. Wenn ich das Unternehmen erstelle, speichere ich die Information, dass es erstellt wurde, über die Seite mit dem Token XXX (ich speichere es zum Beispiel in der Sitzung des Benutzers, da wir diese Information nicht für immer behalten müssen) und wenn das Formular gesendet wird Ich weiß, dass eine Firma bereits mit diesem Token generiert wurde. Ich weiß, dass der Benutzer die gleiche Formularinstanz verwendet hat und die Zurück-Schaltfläche verwendet hat, da das Token anders wäre, wenn er explizit nach einer anderen Firma fragt.

Was denkst du? (Ich dachte zuerst, es sollte eine einfachere Lösung geben, da dies für ein so einfaches Problem etwas überentwickelt zu sein scheint)

    
Weier 19.02.2017 23:10
quelle
0

Dies ist eher eine UX-Frage.

Ich würde denken, dass die Lösung in den Informationen liegt, die dem Benutzer in diesem Formular gegeben werden, um ihnen zu helfen, zu verstehen, was sie tun.

Legen Sie beispielsweise einen Titel mit dem Namen "Create a company" fest, und legen Sie Ihre Übermittlungsschaltfläche als "Create Company" fest, um Ihrem Benutzer dabei zu helfen. Verwenden Sie beim Erstellen des Unternehmensobjekts eine eindeutige ID, und übergeben Sie die ID an dieselbe URL, um eine Aktualisierung durchzuführen. Sie sollten dann Ihren Titel und die Schaltfläche aktualisieren, die dem Benutzer mitteilt, dass sie aktualisieren anstatt zu erstellen.

In diesem Sinne würde ich sagen, dass es besser ist, eine allgemeinere URL wie /company und /company?id=12345 zu verwenden.

Sie können auch das Restful-API-Protokoll in Betracht ziehen, um Ihrem Server zu helfen, die CRUD-Operation zu identifizieren. Ссылка

    
tropicalfish 23.02.2017 02:25
quelle
0

Ohne den "Routing" -Teil von django ist es schwer zu helfen. Ich kann nur meine Erfahrung aus der express.js-Router-Funktionalität beantworten:

  • Sie können einen Beitrag auf / Firma angeben, der für neue Benutzer ist.
  • Sie können eine andere Route für post on / company / angeben: companyid für ein sich änderndes Formular
  • und als Antwort von create-post können Sie auf den anderen Ort umleiten.
Myonara 24.02.2017 06:05
quelle
0

probiere das

aus %Vor%

Und noch ein

Verwenden Sie temporäre Tabellen oder Sitzungen, um die Formulardaten der Seite 1 zu speichern. Wenn das Formular Seite 2 übergeben wird, verwenden Sie die temporären Daten der Seite 1, die in der Datenbank oder in der Sitzung gespeichert sind.

Verwenden Sie eine separate Taste (verborgenes Feld) auf Seite 1 und Seite 2.

    
Crazy Developer 24.02.2017 09:36
quelle