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['TestCookie'];
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.
Unsolved 
