First, an example

Let’s create a text input that we want to be remembered. I’ll give the the every-so-appropriate name of fav_starbucks_drink Here it is:

Fav Starbucks drink o’ choice:

For all you n00bs out there, the XHTML code is:

<input name="fav_starbucks_drink" type="text" />

Test this jQuery code out by entering in a value in the input and then refreshing the page.

jQuery Code:

Realize two things. You’ll need the jQuery cookie plugin as well as a link to jQuery itself. We are going to be using the cookie plugin to cookie or save the user’s data.

function remember( selector ){
$(selector).each(
function(){
//if this item has been cookied, restore it
var name = $(this).attr('name');
if( $.cookie( name ) ){
$(this).val( $.cookie(name) );
}
//assign a change function to the item to cookie it
$(this).change(
function(){
$.cookie(name, $(this).val(), { path: '/', expires: 365 });
}
);
}
);
}

Restoring saved field values

Aight. Let’s just dive into explaining this hunk of code. First, you will notice the function declaration:
function remember( selector ){

The function parameter selector is a jQuery selector, which happens to be either a CSS3 selector that targets the desired inputs or a collection of jQuery objects.

Next:

$(selector).each( function{...

$.each is a sweet function that executes the function passed in as it’s argument for every object within the jQuery collection as created by the selector parameter. If you are lost at this point, let it suffice to say that we are going to loop through all of the input items as identified by their selectors.

Now, lets digest a bigger chunk. This next segment of code will perform the function of restoring any saved values. Now, hopefully this script is being ran on page load, so this restore segment will restore the field values on page load. Here’s that jazzy code now:

var name = $(this).attr('name');
if( $.cookie( name ) ){
$(this).val( $.cookie(name) );
}

First, a variable name is created and set to the attribute of name on the input item. What does that mean you ask? Well, basically we don’t know the selector that targeted this input, but we want to store the name of the form item as we aren’t guaranteed we will have an id. Cool now the name attribute of the input is stored in the var of name, so fittingly named.

Next, the code is if( $.cookie( name ) ). What’s that mean? Think of it like this: “Is there a cookie with this name”? Okay, so if we have cookied the value for this input, it’ll be in that cookie. Radness. Okay, if there is a cookie, set this input item’s value attribute to that value. Simple eh? By using the $.val() function, I can set the value if I pass a parameter or I can get a value by leaving params emtpy. Eazy peezy – set the value to the cookie with that name:

$(this).val( $.cookie(name) );

Ok, now we have code for all input items of type text and textareas to be set. We won’t cover checkboxes, radio’s and select lists on this post.

Creating functions to save field values on change

This block of code is uber simple. Check it:

$(this).change(
function(){
$.cookie(name, $(this).val(), { path: '/', expires: 365 });
}
);

Guess what $(this).change() does? That’s right, it creates an onchange function handler for the targeted input item. So whatever function we pass the change function will be ran when input item’s value is changed. Word.

Wow, this one is easy. Guess what, when this input item gets changed, cookie it. That’s it. In plain english, we are naming the cookie the name of the input item, we are assigning it the value of the input, it’s path is the root of the site and it expires 1 year from now. Rocking.

Last, lets run the code. Do that by calling the function, passing it the selector to target the item. Something like this will suffice:

remember( '[name=fav_starbucks_drink]' );

Ooh, check that out, I used an attribute selector, which since jQuery supports up to CSS3 selectors, will actually work on IE6. ;)

You could also run the code as soon as the document is ready by doing something like this:

$(document).ready(
function(){
remember( '[name=fav_starbucks_drink]' );
}
);

That’s it. This code could obviously be improved no doubt, including handlers for select, checkboxes, radios and more, but you get the gist. This script was uber easy to bust out. I heart jQuery. Do you?