I have a form with an array of text fields. The user (through javascript) can add an arbitrary number of text fields to the form. After submitting the form and pressing the back button the form displays only with the fields that were on the original form when it was first rendered (any added text fields are lost). What is the best way to allow the back button to render the form in the state when the user submitted it? Any ideas are welcome, some things I've tried are:

Put the form data in a cookie (this
doesn't work great for a couple
reasons but the biggest killer for me
is that cookies are limited to 4K in
size)

Hey Brian, are you opposed to using a temporary cookie to store the values. How many fields would your users generally add? I'll provide code if this even sounds remotely like a good solution.
–
Doug NeinerNov 20 '09 at 21:38

Hey Doug, The users are creating a time card, so they can be adding quite a few elements on the order of 100. I'm not sure if I'm opposed to temporary cookies, if they work I'm all for them. I think they may cause issues for the other cookies if the total cookie size exceeds the 4K max. Thanks.
–
Brian FisherNov 20 '09 at 22:24

6 Answers
6

I can't find a prewritten library for this, but I'm sure its been solved before. If I had to it myself I would take this approach:

Use the command pattern so that each method which modifies the page's UI by adding controls also invokes an AJAX method to push the method invoked (textual Javascript representation) onto a queue stored in the server's session.

After body onLoad completes, use an AJAX method to query the server's session for a command queue for the page the user is on. If one is retrieved, just eval each member of the queue to rebuild the page's UI in the same order the user did it.

Keep in mind with this approach you are recording not just additions of controls, but removals as well. You will require separate state holders for user input controls, like text boxes (you will also likely need server-side session with AJAX method access).

Sounds interesting, I will give it a try. You mention "separate state holders for user input controls" what do you mean by this? Thanks.
–
Brian FisherNov 12 '09 at 19:42

1

If a button click adds a text box ('text2') your method will push a 'addTextBox("text2");' JavaScript command to your AJAX service. That's all fine and good. The problem is the user is going to type text in said text box. You'll need these text boxes (or other controls) to relay said data to the server so when you recreate the UI, you also recreate the values the user input into the controls. You can use the command pattern to solve this as well by pushing JavaScript functions to set values onto the command queue.
–
cfedukeNov 12 '09 at 19:54

There has to be a library out there for doing just this, unfortunately googling for "record and replay Javascript" doesn't point me right to it.
–
cfedukeNov 12 '09 at 19:57

MS has a thing called "history points" for their AJAX and ASP.NET stuff which utilizes the querystring for state storage (ug) but I don't see a general purpose library for doing this.
–
cfedukeNov 12 '09 at 20:12

How about creating an <input type="hidden"> (with no name or outside the form so it's not submitted) in which you store an encoded list of extra fields to add and their values? While the browser won't remember newly-added fields on ‘back’, it will remember the values of hidden fields that were in the form from the start.

Here's an example that saves the extra fields on document unload and retrieves them on ready:

You can use form.onsubmit instead of window.onbeforeunload if you only need it to remember values over a submission. onunload doesn't work as some browsers will already have stored the old form values before that event occurs.

In Firefox the position of the hidden input is important. For some reason, if you put it below the dynamically-added fields, Firefox gets confused about which input it is and fails to remember the value.

This example doesn't work in Opera. It can be made to work in Opera, but it's a pain. Opera's calling of load and unload events is inconsistent so you have to use onsubmit instead, or setting the hidden field on a polling interval, or something. Worse, when Opera remembers previous form-field values, it actually doesn't fill them in until after onload has fired! This already causes many, many form-scripting problems. You can work around that by putting a small timeout in your onload to wait until the form values have gone in if you need Opera compatibility.

In good browsers you can have it working perfectly simply by not breaking it.

Firefox 1.5 uses in-memory caching for entire Web pages, including their JavaScript states, for a single browser session. Going backward and forward between visited pages requires no page loading and the JavaScript states are preserved. source

This is supported in Opera and WebKit too. However DOM cache is only possible in you stick to the rules:

Don't use onunload, onbeforeunload.

Don't use Cache-control: no-store or must-revalidate.
In PHP you must change session.cache_limiter from patently_ridiculous (I think they spell it nocache) to none.

session_cache_limiter('none');

Unfortunately HTTPS is also out.

If you don't force browsers to reload the page, they won't. They'll keep the DOM and its values unchanged, exactly as RFC 2616 suggests.

In my example the fields added dynamically by javascript to not get recreated when I press the back button in FF3.5, Chrome or IE 8. I believe my http headers are set correctly. I also tried using session_cache_limiter('none'), but no change. Is there something I'm missing?
–
Brian FisherNov 20 '09 at 17:42

Block the use of the back button. When the back button is pressed, rerender the previous page for the user with the new fields included, either visibly if that makes sense, or hidden. That way the user is able to use the back button normally and you have full control over the appearance of the ''previous'' page.

In your specific use case, you just need to render the page with all the fields visible and filled in with the values that were submitted.

This is a good pattern to follow for any wizard type of process where you provide a sequence of forms for the user to fill in and they may choose to go back to a previous form.

To make it perfectly clear, I am suggesting that you use this advice on capturing the onUnload event to trigger form submission (so that you get the entered values) and to rerender the previous page that "back" would have displayed (without the values). The only alternative is to use Ajax to send the entered values every time that the user leaves a field, and then have every page check with the server via AJAX to retrieve additional values to display.

Here are some additional pages that discuss taking control over the function of the back button and using the unload event to persist forms data:

The question here is.. how to rerender the previous page with user submitted values. And don't forget that the user may alter the values and submit again. They may even delete some values.
–
NirmalNov 21 '09 at 7:28

Strange comment. The application on the server has the user submitted values and should know how to rerender the previous page (which it also rendered) using the additional values submitted by the user. Or deleted by the user. The point is that after clicking submit, the state exists in the server, and if it wants to maintain that state on the page that the user views, it can render the page with that state included so that the state is now on the client.
–
Michael DillonNov 22 '09 at 14:46