Storing Form Data in Cookies (for later auto-fill-in) . . . ■ yuba.ch

Storing Form Data in Cookies (for later auto-fill-in)

This paragraph explains how to store form filed's data in cookies. The goal is, that users have not to fill in these fields manually again when they come back to the same form or if they go to another form on the same site.

Before (without cookies)

Let's demonstrate it with a simple form with just two fields:

 
[fo:]
[fi:]
[le:]Your data[:le]
[h:]
<!--Hidden fields in your form. You should have them in your form!-->
<input type="hidden" name="ouremail" value="enter@youremailaddress.here" />
<input type="hidden" name="thanks" value="thanks" />
<input type="hidden" name="thankssubject" value="Thank you for your message!" />
<input type="hidden" name="thankstext" value="Thank you for your message! Please find it quoted below:" />
<input type="hidden" name="thanksgreetings" value="Yours faithfully, John Smith" />

<!--Visible fields in your form displayed to the form user-->
<label>Name*</label>
<input size="77" type="text" name="name_mandatory" />

<label>Firstname</label>
<input size="77" type="text" name="firstname" />

<label> </label><input type="submit" value="send" />
[:h]
[:fi]
[:fo]

After (with cookies)

Firstly you have to add the id*. Then you have to add the onchange command as shown below for each field you want to store into cookies.
*Without the id cookies would work, but not the charts. Generally spoken, if you add something after name="...", you also have to add the id first!

The pink section shows the script you have to add. This script inserts the cookie values into the form fields when the user uses the form later again (or another form containing this pink section). This script must be placed after (below) all formfields!

 
[fo:]
[fi:]
[le:]Your data[:le]
[h:]
<!--Hidden fields in your form. You should have them in your form!-->
<input type="hidden" name="ouremail" value="enter@youremailaddress.here" />
<input type="hidden" name="thanks" value="thanks" />
<input type="hidden" name="thankssubject" value="Thank you for your message!" />
<input type="hidden" name="thankstext" value="Thank you for your message! Please find it quoted below:" />
<input type="hidden" name="thanksgreetings" value="Yours faithfully, John Smith" />

<!--Visible fields in your form displayed to the form user-->
<label>Name*</label>
<input size="77" type="text" name="name_mandatory" id="name_mandatory" 
onchange="document.cookie='name_mandatory='+escape(this.value)+'; expires=Thu, 31 Dec 2037 12:00:00 GMT';" />

<label>Firstname</label>
<input size="77" type="text" name="firstname" id="firstname" 
onchange="document.cookie='firstname='+escape(this.value)+'; expires=Thu, 31 Dec 2037 12:00:00 GMT';" />

<label> </label><input type="submit" value="send" />

<script>
if (location.href.indexOf('chart.php')<0 && location.href.indexOf('formdataedit.php')<0) {
if (document.u5form.name_mandatory.value=='' && document.cookie.indexOf('name_mandatory=')>-1){ 
document.u5form.name_mandatory.value=('; '+document.cookie).split('; name_mandatory=')[1].split(';')[0];
document.u5form.name_mandatory.value=unescape(document.u5form.name_mandatory.value);
}
if (document.u5form.firstname.value=='' && document.cookie.indexOf('firstname=')>-1){
document.u5form.firstname.value=('; '+document.cookie).split('; firstname=')[1].split(';')[0];
document.u5form.firstname.value=unescape(document.u5form.firstname.value);
}
}
</script>
[:h]
[:fi]
[:fo]

This also works accross different forms on the same site. If you want to use the data stored in cookies coming from form A to auto-fill-in form B, but form B uses different names for the form fields, you just have to adjust the script in form B as follows:

 
...
if (document.u5form.fieldnameinformB.value=='' && document.cookie.indexOf('fieldnameinformA=')>-1){
document.u5form.fieldnameinformB.value=('; '+document.cookie).split('; fieldnameinformA=')[1].split(';')[0];
document.u5form.fieldnameinformB.value=unescape(document.u5form.fieldnameinformB.value);
}
...