Search code examples
htmlformshttpbrowseruser-experience

"Create or update" form behavior when hitting back button

I have the following workflow on a website:

  1. Some user John Doe declares a company through form 1 (fields: name, head office location)
  2. After John Doe submits (HTTP POST) form 1, he is redirected (HTTP 302) to company form 2 with additional legal information about the company.

The problem is, if John Doe hits the back button of his browser during step 2, he will land on the form 1, with data filled by the browser (using values he already submitted — that's what Firefox and major browsers seem to do).

John Doe might then think he can use this form to update some information (e.g. fix a typo in the name of the company) whereas he will actually create a new company doing so, as we don't know on the server side whether he wants to declare a new company or update the one he just created.

Do you know any simple solution to handle that problem ?

Solution

  • I think it is more user-friendly when user can return back to previous form and update it (instead preventing the described behavior). I use in most cases similar way to handle described problem:

    1. Let's assume that user is on the page /some-page, that contains "Create new company" button. When the user opens this page, will be executed special method createOrFindCompanyDraft() on the server-side. This method creates new company "draft" record in DB (only for the current user). For example, draft record has primary key id=473. When you execute this method again it will return the same record with the id=473 (with "draft" status). "Draft" record should't display on any other interfaces. And "Create new company" has link /company/common/473.

    2. When user go to /company/common/473, you display form 1, that will be filled from "draft" record. At first time user will see empty form. Technically user will update the existing record, but you can display "Create new company" title on the page.

    3. Then user go to form 2, for example, /company/legal-info/473, you create similar draft record for the this form (similar to step 1).

    4. When user submit the form 2, you will remove "draft" status from the record id=473 (and any related records).

    5. Next time when user open page /some-page, will be created new draft record for the current user.

    Browser history will contain:

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

    I like this approach, because all form only update records. You can go to previous/next form many times (for example "Back"/"Forward" browser buttons). You can close browser, and open not completed forms tomorrow. This way doesn't require any additional manipulation with the browser history.