photo
Jordan Sissel
geek

Fri, 30 Jun 2006

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

Comments: 18 (view comments)
Tags: , , ,
Permalink: /geekery/jquery-formfill-v1
posted at: 01:52


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

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

Thank you, Jordan for this article!

bob posted at Tue Apr 24 13:48:12 2007...
Great tut! thanks

bob posted at Tue Apr 24 13:48:20 2007...
Great tut! thanks

caca posted at Tue May 15 22:41:12 2007...
sdfgsd

Karl posted at Wed Jun 20 06: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 posted at Tue Jul 24 00:51:49 2007...
Testing this great tool...

Eduardo posted at Mon Aug 6 21:58:38 2007...
This is a test

bodro posted at Sat Sep 29 17:03:16 2007...
This is a test 2

alicia.lamb@yahoo.com posted at Fri Nov 16 10:58:25 2007...
test

e posted at Wed Nov 28 05:13:21 2007...
e

d posted at Mon Jan 21 22:45:51 2008...
yo!

sfqsdfg posted at Wed Jan 30 15:34:11 2008...
asdfasdf

sfqsdfg posted at Wed Jan 30 15:34:51 2008...
asdf

chuck posted at Tue Mar 18 17:38:35 2008...
test

MD posted at Wed Jun 4 12: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 posted at Wed Jun 4 12:56:25 2008...
It still works for me. Does it not work with newer versions of jquery?

c posted at Thu Aug 21 11:57:01 2008...
a

asdf posted at Thu Aug 28 06:59:21 2008...
asdf


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:


Search this site

Navigation

Metadata

Home About Resume My Code (SVN)

Articles

ARP Security Dynamic DNS with DHCP OpenLDAP+Kerberos+SASL PPP over SSH SSH Security: /bin/false Week of Unix Tools Work Efficiency

Projects

fex firefox tabsearch firefox urledit grok keynav liboverride newpsm (FreeBSD) nis2ldap pam_captcha poor man's backup Solaris audio utility xboxproxy xdotool xmlpresenter xpathtool misc scripts

Presentations

Yahoo! Hack Day '06 Unix Essentials Vi/Vim Essentials

Tag Cloud

Calendar

< June 2006 >
SuMoTuWeThFrSa
     1 2 3
4 5 6 7 8 910
11121314151617
18192021222324
252627282930 

Friends

BarCamp Kent Brewster Tantek Çelik John Resig Wesley Shields Tyler Shields

Technorati