Search this site


Metadata

Articles

Projects

Presentations

jQuery autofill version 2

This post marks 4 in one day. Whew!

Resig and I were bouncing ideas around after I made the form filler, and we came up with something that fits very nicely into the jQuery api (in the form of something very pluggable).

You'll need the following code that will extend jQuery's functionality. Basically, it adds 'saveAsCookie' and 'loadAsCookie' function calls to $() objects.

$.fn.saveAsCookie = function(n,t){
   return this.each(function(){
     createCookie( (n || '') + (this.name || this.id), this.value, t );
   });
 };

$.fn.loadAsCookie = function(n){
  return this.each(function(){
    this.value = readCookie( (n || '') + (this.name || this.id) );
  });
};
You can safely put that code somewhere and load it anywhere you need autofill. Reusable code is awesome.

Now, we don't want to cache *all* input elements, becuase only some contain user-input and only some need to be saved. For this, I put the class 'cookieme' on all input elements I wanted to save.

 $(document).ready(function(){
   $("form#comments_form").submit(function(){
     $("input.cookieme",this).saveAsCookie("formdata");
   })
   .find("input.cookieme").loadAsCookie("formdata");
 });
The arguments to 'saveAsCookie' and 'loadAsCookie' are namespace prefixes. This way, you can avoid namespace collisions with other cookies. All of my autofill cookies will be prefixed with 'formdata' and suffixed with the element name or id attribute.

So, we squished the code down to 6 lines, 4 of which are actually meaningful.

jQuery++


13 responses to 'jQuery autofill version 2'

Showing last 13 comments... (Click here to view all comments)

Jordan Sissel wrote at Fri Jun 30 00:23:21 2006...
Hurray for cookies!

John Resig wrote at Fri Jun 30 18:01:13 2006...
Testing the snazzy comment system.

Ken Petri wrote at Mon Jan 29 14:03:21 2007...
Question: how can you do this on an unload event?

Here's the scenario: I have a page that someone might navigate away from using a link. The page contains a form--and it's a fairly long one. I would like to save the person's form choices before the page unloads so that when they come back the choices are preserved. It is likely the person will navigate away from the page by using a link on the page.

Tried doing this by using the current code above and setting an unload event to write the cookie, but it wouldn't work. I'm experimenting by setting the code for all links of a certain class--maybe that will work.... Or maybe I could have it listen for onchange events within the form??

Anyway, if you have any solutions or even ideas, I'm all ears.

Thanks,
ken

Ken Petri wrote at Mon Jan 29 14:52:42 2007...
Question: how can you do this on an unload event?

Here's the scenario: I have a page that someone might navigate away from using a link. The page contains a form--and it's a fairly long one. I would like to save the person's form choices before the page unloads so that when they come back the choices are preserved. It is likely the person will navigate away from the page by using a link on the page.

Tried doing this by using the current code above and setting an unload event to write the cookie, but it wouldn't work. I'm experimenting by setting the code for all links of a certain class--maybe that will work.... Or maybe I could have it listen for onchange events within the form??

Anyway, if you have any solutions or even ideas, I'm all ears.

Thanks,
ken

test wrote at Sun Dec 27 04:11:43 2009...
test comment

aaron wrote at Tue Feb 2 14:20:41 2010...
test comment

aaron wrote at Tue Feb 2 14:20:50 2010...
test comment

doug wrote at Thu Mar 11 13:21:48 2010...
hi, i'm doug.

doug wrote at Thu Mar 11 13:22:04 2010...
hi, i'm doug.

doug wrote at Thu Mar 11 13:22:21 2010...
hi, i'm doug.

doug wrote at Thu Mar 11 13:23:15 2010...
hi, i'm doug.

doug wrote at Thu Mar 11 13:23:27 2010...
hi, i'm doug.

doug wrote at Thu Mar 11 13:24:19 2010...
hi, i'm doug.


Leave a reply

You need javascript enabled to use this form. Anti-spam efforts ongoing. Also, if the comment doesn't show up, it's because the form expired. Go back and copy your comment, reload the form, and resubmit. Apologies if this is a hassle, I'm just playing with antispam methods right now. If this insists on not working, please email me about it.

Name (required)
E-mail (optional, if you want me to be able to email you back)
URL (also optional)
Comment: