Form data & Back button

[jnscollier]

I have a form and here's what I have an issue with....

If the user types something in the boxes, and then accidentally goes to another site/page in the site WITHOUT hitting submit on the form, all the data is lost when they click the back browser button. What I want them to be able to do is hit the back button and all the information to still be there. (quick example, as i was typing this i accidentally clicked a link on the side, i hit back and everything I had typed was still here!!)
I was told the best way to do this is through cookies.

I've never done anything with cookies, so here's what I have and it doesn't seem to work. I have tried setting the cookie both before and after the textbox and have no result....

<input name="txt_blogname" type="text" id="txt_blogname" value="<?php  echo $_COOKIE["TestCookie"]; ?>" size="75" maxlength="100">
<?php
$value=$HTTP_POST_VARS['txt_blogname'];

// send a simple cookie
setcookie("TestCookie",$value);
?>

Please help!

[digital-ether]

Here's an explanation on whats happening with the cookies that may help you.

Cookies are bits of info that the Client (browser) saves when requested by the Server.

That means that they require a new HTTP Request from the server, which is the same as a new page load.

Examples:

1) Example 1

Say you have a php page called page.php with:

<?php

setcookie("TestCookie", "Hello I'm a Cookie!");

echo $_COOKIE['TestCookie'];

?>

When you first view the page, you will not see any output. However, when you view it a second time, you'll see "Hello I'm a Cookie!".

Cookies are implemented in the HTTP Protocol. So in your viewing the page what you did was:

First Request:
Browser sends HTTP Request to page.php without any cookies.
Server sends a HTTP Response, with the HTTP Header:

Set-Cookie: TestCookie=Hello I'm a Cookie!;

Now the cookie is saved by your browser, in a local file.

Second Request:
Browser sends HTTP Request to page.php with the cookie.

Cookie: TestCookie=Hello I'm a Cookie!;

Now in page.php this cookie exists as $_COOKIE;

2) Example 2

In your example, this is the process that happens if the form is submitted:

1) Browser sends HTTP Request for page with form. No cookies are sent to the server.
2) The server responds with the HTTP Response that contains the HTML document with the form in the HTTP Body, and in the HTTP Response Header the request to set the cookie "Test Cookie". This cookie value is empty however, since the form has not been submitted yet.
3) The user submits the form, the HTTP POST Request is sent to the server, with the empty cookie "Test Cookie".
4) The server responds with the HTTP Response and a request to set the cookie "TestCookie" with the value of the users input into the form.

-- now if a user clicks the back button, the form would populate with the cookie value.

-- however, if a user only reached step 2, and did not submit the form, the cookie value is an empty string. This is what will populate the form.

What it boils down to is that the form has to be submitted, for the server to receive the form input, and ask the browser to save it in its HTTP Response.

---

The solution is to set the cookie with JavaScript. This does not require a round trip to the server in order to set the cookie.

Heres the JS code I use:

/**
* Set a cookie
* @param string cookie name
* @param string cookie value
* @param string cookie expiration counter in days
* @param string cookie path
* @param string cookie domain
* @param bool secure?
*/
function setCookie( name, value, expires, path, domain, secure ) {
	var today = new Date();
	today.setTime( today.getTime() );
	if ( expires ) {
		expires = expires * 1000 * 60 * 60 * 24;
	}
	var expires_date = new Date( today.getTime() + (expires) );
	document.cookie = name+"="+escape( value ) +
		( ( expires ) ? ";expires="+expires_date.toGMTString() : "" ) +
		( ( path ) ? ";path=" + path : "" ) +
		( ( domain ) ? ";domain=" + domain : "" ) +
		( ( secure ) ? ";secure" : "" );
}

You can attach an event handler to the input fields to handle the firing of the onblur event (event that is fired when you leave a field). The event handler can then save the values to a cookie.