8

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 ?

Weier
  • 1,339
  • 1
  • 10
  • 20
  • Is the input value being populated from server side? php example: `` – Manuel Azar Feb 17 '17 at 15:40
  • Is the additional legal information submitted to form 2 optional or required? – comesuccingfuccslot Feb 18 '17 at 00:24
  • @ManuelAzar: the question you mention asks how not to display cached values in the input, which is one way to go but I was looking for a smarter "trick" to have the form update the company if we can know that the user just came back to the creation form prefilled with the previous data. – Weier Feb 19 '17 at 22:58
  • @user6003859 It is required – Weier Feb 19 '17 at 22:59
  • then you should check from database whether the value already exist or not if yes then update it if no then just insert it as new or just clear the cookie of browser it will also help – aditya shrivastava Feb 24 '17 at 07:16

7 Answers7

4

Use javascript/jquery script after the page is loaded to empty all the inputs. This will prevent confusion of "updating the company".

jQuery would look something like this:

$('#elementID').val('');
Bram
  • 2,718
  • 1
  • 22
  • 43
2

You can also handle the situation by manipulating the browser history on load of form 2, and pass the CompanyId generated on submit of form 1 using querystring. So that you can actually update the company as the user

Suppose John submits form1.html, a unique CompanyId "1001" is generated and redirected to form2.html. Now on load of form2 you can modify the browser history form1.html?companyid=1001 using 

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 1", "form1.html?companyid=1001");

Now, when the user click back button and submits the form1 again. you can check for companyid in querystring and update the company.

Tej Patil
  • 115
  • 11
  • TBH I didn't know we could manipulate the history... but that would definitely provide a clean solution. Do all browsers allow that transparently ? (I suppose at leat they don't allow adding an entry with another domain...) – Weier Feb 24 '17 at 15:27
  • Yes it is supported by most used browsers Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari – Tej Patil Feb 27 '17 at 04:40
  • 1
    Please check [ Browser compatibility ] (https://developer.mozilla.org/en-US/docs/Web/API/History_API) – Tej Patil Feb 27 '17 at 04:41
1

try this

<form autocomplete="off" ...></form>

And Another

Use temporary tables or session to store the Page 1 form data. If the page 2 form is submitted use the temporary data of page 1 which is stored in database or in session.

Use a Separate key (Hidden field ) in both page 1 and page 2.

Crazy Developer
  • 339
  • 3
  • 18
1

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.

IStranger
  • 1,868
  • 15
  • 23
  • I don't understand how the first paragraph of your answer is related to the question (the part endind with "show me please how you use this cache"). However, the rest of your answer provides a possible solution: by creating the company entry (and its ID) before the form 1 is submitted and using it in the URL. I just thought there was a generic simpler solution, but otherwise I could go with that or some variant. – Weier Feb 24 '17 at 15:22
  • @Weier Oh, sorry. I copy-pasted part of other answer. I removed it. – IStranger Feb 24 '17 at 18:15
  • Sessions is better suited for this work, the only advantage your solution provide is to work across all clients simultaneously, which isn't necessarily a good thing, but it also forces you to create models upfront which won't work in some scenarios. – Eric Feb 24 '20 at 10:31
0

Actually I thought of a trick to obtain that "create on first post, update after" behavior (just like the user thinks it should behave).

Let's say the step 1 form is at the URL /create_company/. Then I could have that page generate a random code XXX and redirect to /create_company/?token=XXX. When I create the company I save the information that it was created through page with token XXX (for instance, I save it in user's session as we don't need to keep that information forever) and when the form is submitted, if I know that a company was already generated using this token, I know the user used the same form instance and must have used the back button since the token would be different if he explicitly asked for another company.

What do you think ? (I initially thought there should be a simpler solution, as this seems a little bit over-engineered for such a simple issue)

Weier
  • 1,339
  • 1
  • 10
  • 20
0

This is more like a UX question.

I'd think that the solution lies within the information given to the user on that form, to help them understand what they're doing.

Set a title that says 'Create a company', for example, and set your submit button as 'Create Company' will help your user with that. Use a unique id when you create the company object, and pass the id back to the same URL in order to perform an update. You should then update your title and button that tells user that they are updating instead of creating.

In that sense I'd say it's better to use a more generic URL like /company and /company?id=12345.

You could also consider using Restful API protocol to help your server identifies the CRUD operation. http://www.restapitutorial.com/lessons/httpmethods.html

tropicalfish
  • 1,230
  • 1
  • 16
  • 29
0

Without the "routing" part of django it is hard to help. I can just answer my experience from the express.js-router functionality:

  • you can specify a post on /company, which is for new users.
  • you can specify another route for post on /company/:companyid for a changing form
  • and as a response from the create-post you can redirect to the different location.
Myonara
  • 1,197
  • 1
  • 14
  • 33