Search this site


Metadata

Articles

Projects

Presentations

jQuery+cookies = trivially simple form autofill

It's always nice when websites you commonly visit remember things about you, or atleast give the perception that they remember things about you.

The Pyblosxom comment plugin doesn't autofill the form. That's too bad. I don't really want to dig into the python code to do any cookie-setting on submission, becuase I have never looked at the code and thusly am unfamiliar with the effort required for such a change. Luckily, we can use javascript to store data in cookies too!

I love jQuery, so that's what I'll use for this little hack. On the comments page, I add the following javascript:

   var uname = "u.name";
   var uemail = "u.email";
   var usite = "u.site";

   function saveCommentInformation() {
      // Save user information from the form!
      createCookie(uname, $("input[@name='author']").val());
      createCookie(uemail, $("input[@name='email']").val());
      createCookie(usite, $("input[@name='url']").val());
   }

   function initCommentForm() {
      // Autofill user information if available
      $("input[@name='author']").val(readCookie(uname));
      $("input[@name='email']").val(readCookie(uemail));
      $("input[@name='url']").val(readCookie(usite));

      // Save comment information when form is submitted
      $("form[@name='comments_form']").submit(saveCommentInformation);
   }

   $(document).ready(initCommentForm);
That's all we need. Whenever someone submits, we will store useful information in a cookie. Whenever that person comes back, we'll pull the data out of the cookie and put it back in the form. User Experience is happier, atleast as far as I am concerned (as a user).

If you are wondering about the 'readCookie' and 'createCookie' functions, you can find them on quirksmode.org:

http://www.quirksmode.org/js/cookies.html

Update: Check out this followup post that implements this in a more jquery-like way.


9 responses to 'jQuery+cookies = trivially simple form autofill'

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

Bakyt Niyazov wrote at Tue Oct 10 00:48:18 2006...
I love jQuery too! it's amazing IMHO even genius!

Thank you, Jordan for this article!

caca wrote at Tue May 15 19:41:12 2007...
sdfgsd

Karl wrote at Wed Jun 20 03:30:58 2007...
Nice from a user experience, ambigous from a bandwidth standpoint and a desaster from a security point.... If I am not totally mistaken, this information will be sent whenever you are sending data to any page on the site. So how do you clean up and when??

Yupi wrote at Mon Jul 23 21:51:49 2007...
Testing this great tool...

MD wrote at Wed Jun 4 09:51:35 2008...
Any examples of variants of this method in use anywhere, anyone?
Date of the original post is 2006. Any updates ?

Jordan Sissel wrote at Wed Jun 4 09:56:25 2008...
It still works for me. Does it not work with newer versions of jquery?

Wojto wrote at Sat Mar 14 12:22:58 2009...
jaja

sdfg wrote at Mon Nov 9 01:09:55 2009...
sdfg

test wrote at Sun Dec 27 04:09:40 2009...
test this.


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: