Problem: Form Extends over 2 Pages

Poof! goes the data on back button

[dhdweb]

I have a form that uses two pages to collect info, on the second page, if a user wants to go back and change something on the first page the fields are all blank!

How can I stop this from happening?

<edit>fix typo</edit>

[dhdweb]

Just noticed this, if you refresh the page before you start, this does not happen.?!?!

<added>This only seems to happen in IE! (imagine that)</added>

[Xuefer]

1 use div show/hide instead of pages
or 2. make your page cachable

[tedster]

That's a very savvy approach, Xuefer. Thanks - it definitely goes in my scrapbook of ideas.

[dhdweb]

Option 1 will not work in this case, the page would be too large.

Maybe option 2 would work:
How does one force a page into cache, I thought this was an automatic thing?

Again, this only seems to happen in IE.
BTW, the page in question is in .php, there is some scripting on the page NOT related to the form. (the form is not generated dynamicly)

Any other ideas out there?

[txbakers]

In ASP I would Make the values of your text boxes equal to "Request("boxname")" which keeps the value in the boxes in the event of a bad input (duplicate ID or something like that).

You could do the same thing with javascript to keep the state of the boxes.

[ann]

I had the same problem...

But, the forms retained their data when I tested it on my work computer but not on the web...hmmmm Thinks I, it must be something in IE.

So whilst on the web I reset IE to default settings, tried my form again and, after delibertly making a mistake, found that the data was kept when I backbuttoned to fix error.

So I think it is in the IE settings, just haven't figured out which one it is yet. :)

Ann

[joshie76]

I've run into this one time and again and this is how I see it so far...

Basically, a browser is supposed to remember form input data (even that changed by JavaScript) when the page is slotted into the browser history -> i.e. when you leave a page.

When you click the back button the page should reload the previous page and restore the form state from history.... In my past experience this works in 9 out of 10 cases on IE but there's just some anomaly that I can't put my finger on...

I don't think allowing the page to be cached will make any difference* and, whilst a good idea, the stacked DIV method is often not an option for most designers and it doesn't really help any if the user actually hits the back button.

We could probably all do with a definitive answer on this one. Maybe it's time to write to Microsoft - Isn't there an 'ask Dr DHTML WebDude' or something on msdn?

*the back button works on many of my non-cachable forms.(As I understand it, the History and the cache are quite different - History has more to do with state and location than saving code to reduce network traffic; though the history will often use a cached page. Get me?)

[dhdweb]

Again I would like to point out that once I load the form page, if I refresh the page before entering any data the problem is not there.

Simulation A: (problem)
1 load the form page
2 enter data
3 click next to go to page 2
4 oops, I mad a mistake and click the back button
5 start swearing because all data entered is gone

Simulation B: (NO problem)
1 load the form page
2 click refresh
3 enter data
3 click next to go to page 2
5 oops, I mad a mistake and click the back button
6 make data correction, and proceed to page 2

So, is there a cheesie script to automaticaly reload the page one time only and not reload if clicking the back button from page 2?

[Chuma]

I recently had a similar problem, but I also had to be able to go back to the original form after several pages that had their own forms.

The solution I implemented was to store the results temporarily in a database between forms and have a 'back' link on each page so you can go back to the previous page without losing data.

Thanks.

[dhdweb]

Any other ideas out there?

[joshie76]

The only other idea I've got is that you could bung all the form data into a cookie and use it to repopulate the form onload (the onload event should still fire even when the user has clicked back).

This might take up quite a bit of cookie space if it's a big form though...

J

[dhdweb]

Ok, I had some time to kill and loaded the site into my local server.

Here is what I found:

The PHP functions on the first form page where not nessesary, so I removed thoses and changed the page from .php to .htm

Now the problem seems to have gone away! I am thinking this is a fluke so without putting the PHP functions back I just changed the page back from .htm to .php, and the problem is back!

So I went and made the changes to the pages on my host server and all seems fine. (clicking the back button and form data is still there);)

So now I just want to know WHY?

Do .php pages run through the PHP interpreter again on a back button click? And if so is this the cause of the problem?

This may be one of the unexplainable quirks of our trade!

I still can't figure out why clicking Refresh before entering any data would also solve the problem while the page was still .php

Can anyone shed some light on this?

<edit reason>I can't type</edit>

[toadhall]

Did the PHP functions you removed have anything to do with laying out the form? That would be an easy explanation. Easy enough to believe anyway. ;)

[dhdweb]

No, the form components are plain html.

[andreasfriedrich]

This might be a headers issue. Telnet to the server and request both versions and see which headers they send. Send the same headers that get sent for the ordinary .htm page with your php script. If everything works this way, then I suggest you use these headers in all php scripts and let us know which ones are needed.

Hope this helps.

Andreas

[dhdweb]

Great, a new can of worms, I don't know how to use telnet!

I do have IP-tools that has telnet but I never tried it :(

[andreasfriedrich]

Itīs easy and give you the opportunity to talk raw HTTP with your web server. I hope you get excited ;). There is no need to despair though, it is very easy.

Connect to your server on port 80 using the telnet command from your prompt.

After the server responds enter the HTTP request and header (two red lines). You send the request with a white line, so you need to press enter twice after the Host line (thatīs what my blue comment is supposed to mean).

The server will answer with the HTTP header and the body which will contain your HTML document.

This is a sample transcript:

---

[af@server Mp3]$ telnet server 80
Trying 192.168.0.10...
Connected to server.
Escape character is '^]'.
GET / HTTP/1.1
Host: server
[press enter again]
HTTP/1.1 200 OK
Date: Fri, 20 Dec 2002 01:24:48 GMT
Server: Apache/1.3.27 (Unix) (Red-Hat/Linux) mod_ssl/2.8.12 OpenSSL/0.9.6 PHP/4.1.2 mod_perl/1.24
Last-Modified: Thu, 15 Nov 2001 20:53:09 GMT
ETag: "2d304-b4a-3bf42b35"
Accept-Ranges: bytes
Content-Length: 2890
Content-Type: text/html

---

You can do this for any URI you want to test. If you would use this URI in your address bar

[server.tld...]

use these commands for telneting:

telnet www.server.tld 80
GET /carters/aaron.html HTTP/1.1
Host: www.server.tld[press enter twice]

Hope this helps.

Andreas

[dhdweb]

Ok, I type
telnet www.myserver.tld 80
and the telnet window comes up

Problem is that it won't let me type anything :(

I'm sure this should be easy but I just don't get it

[andreasfriedrich]

Are you using Windows?

[dhdweb]

Never mind, I did it the easy way with the header checker on WW

Here are the results:

Server Response: [blabla.com...]
Status: HTTP/1.1 200 OK
Date: Fri, 20 Dec 2002 02:15:19 GMT
Server: Rapidsite/Apa/1.3.26 (Unix) FrontPage/5.0.2.2510 mod_ssl/2.8.10 OpenSSL/0.9.6e
Last-Modified: Wed, 18 Dec 2002 18:29:38 GMT
ETag: "dc3aa03-8436-3e00be92"
Accept-Ranges: bytes
Content-Length: 33846
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/html

Server Response: [blabla.com...]
Status: HTTP/1.1 200 OK
Date: Fri, 20 Dec 2002 02:18:23 GMT
Server: Rapidsite/Apa/1.3.26 (Unix) FrontPage/5.0.2.2510 mod_ssl/2.8.10 OpenSSL/0.9.6e
X-Powered-By: PHP/4.1.2
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html

The code on these 2 pages is exactly the same!

Now I don't really know what I am looking for here.

[andreasfriedrich]

The only two header fields that could make any difference are Last-Modified and Content-Length. Try adding those headers to your PHP script and test again.

I ususally prevent caching for all pages containing forms explicitly. When a user presses the back button the browser should request the page again. Then my scripts will fill in the form with the data the user entered before and send it back to him. This somewhat like the method joshie76 suggested although I only use the cookie to store a session id.

Andreas

[andreasfriedrich]

I have been looking for the perl proxy server I posted some time ago. If you plug that in between your server and browser you could log all traffic that is going on. You could just use some sniffer to watch it as well. Sometimes this helps.

Andreas

[dhdweb]

Thanks Andreas,

Setting the Last-Modified header in the php version seems to have cleared up the problem.

I would say at this point that IE will request the page again on back button click without this header

dhdweb

<edit reason>I did not like what I wrote the first time!</edit>