Bookmarklet Generator

Overview

Practically every web-related job I've ever had, I've found myself constantly having to enter and re-enter information into forms for testing purposes. After the 2879879287th of filling in the same form, it REALLY begins to grate on the ol' nerves, as any Quality Assurance (QA) specialist will know.

To remedy this I wrote a simple bookmarklet (see here for a definition of "bookmarklet") to fill in a form automatically - I had to fill in that particular form maybe 10 or 20 times a day, so it was a good candidate for automation. Now, whenever that form stares back at me, I can just click my custom bookmarklet and hey presto! It's filled in. This has saved me a great deal of angst, let me tell you.

So then I figured: hey, this is pretty cool! It would sure be nice to have this functionality for ANY form I come across. Hence the Form Filler Bookmarklet Generator. This little script actually builds javascript bookmarklets for any web form. You just fill in the form, click the bookmark and a window pops open with the bookmarklet(s) for that page. If your page contains multiple forms and each form contains values in at least one field, a bookmarklet will be generated to repopulate it with exactly the same content. Cool, huh?

Requirements / Limitations

• Firefox. (Sorry, but it's high time to drop IE. Trust me).
• Javascript must be enabled
• Form size: due to the maximum length of URLs (~3000+ for Firefox), it won't work for storing a LOT of form information. Best for smaller forms.
• Single quotes in fields will cause problems.
• The script doesn't UNSELECT/UNCHECK checkboxes or multi-select boxes, only RE-selects them.

WARNING

• Don't ever ever ever ever ever ever use this script to store sensitive information like passwords or credit cards! That information is stored in a bookmark in your web browser, so anyone on your computer will be able to access it!

---

Install

To install it *, just:

1. Copy the contents of the textarea below to your clipboard (CTRL-A & CTRL-C on Windows)
2. In your browser's toolbar, right click over it and select "New Bookmark"
3. Name it "Form Filler" or whatever you fancy, and in the Location field, paste in the contents you just selected (CTRL-V on Windows)
4. Continue reading below...

javascript:var fz=new Array();var z=new Array();function F(p){var m=new Array();for(n=0;n<p.length;n++){var q=new Array();for(ind=0;ind<p[n].length;ind++){q.push('\''+p[n][ind]+'\'')}m[n]=eval('['+q.join(',')+']');}return m;}function C(n,cz){var i=-1;for(ab=0;ab<cz.length;ab++){if(cz[ab][1]==n)i=ab;}return i;}function B(){fz.length=0;if(!document.forms.length){alert('There are no forms in this page.');return;}for(fi=0;fi<document.forms.length;fi++){z.length=0;f=document.forms[fi];for(i=0;i<f.length;i++){ip=f.elements[i].type;iv=f.elements[i].value;ix=f.elements[i].name;if(!iv){continue;}if(ip=='text'||ip=='textarea'||ip=='select-one'||ip=='password')z.push(['d',ix,iv]);if(ip=='radio'||ip=='checkbox'||ip=='select-multiple'){x=C(ix,z);if(x==-1){if(ip=='select-multiple'){iv=%22%22;for(g=0;g<f.elements[i].length;g++){if(f.elements[i][g].selected){iv+=f.elements[i][g].value+%22|%22;}}z.push(['s',ix,iv]);}if(ip=='radio'){if(f.elements[i].checked){z.push(['c',ix,iv]);}}else{if(f[ix].length){if(f.elements[i].checked){z.push(['c',ix,iv]);}}else{if(f.elements[i].checked){z.push(['n',ix,'']);}}}}else{if(f.elements[i].checked){z[x][2]+=%22|%22+iv;}}}}fz.push(F(z));}bms=new Array();for(f=0;f<fz.length;f++){if (!fz[f].length){continue;}bm=%22java%22+%22script:function D(a,b){c=b.split('|');d=false;for(q=0;q<c.length;q++){if(c[q]==a)d=true;}return d;}%22;bm+=%22function E(){f%22+f+%22=document.forms[%22+f+%22];%22;for(k=0; k<fz[f].length; k++){if(fz[f][k][0]==%22d%22){bm+=%22f%22+f+%22['%22+fz[f][k][1]+%22'].value='%22+fz[f][k][2]+%22';%22;}if(fz[f][k][0]==%22n%22){bm+=%22f%22+f+%22['%22+fz[f][k][1]+%22'].checked=true;%22;}if(fz[f][k][0]==%22c%22){bm+=%22for(i=0;i<f%22+f+%22['%22+fz[f][k][1]+%22'].length;i++){if(D(f%22+f+%22['%22+fz[f][k][1]+%22'][i].value,'%22+fz[f][k][2]+%22')){f%22+f+%22['%22+fz[f][k][1]+%22'][i].checked=true;}}%22;}if(fz[f][k][0]==%22s%22){bm+=%22for(i=0;i<f%22+f+%22['%22+fz[f][k][1]+%22'].length;i++){if(D(f%22+f+%22['%22+fz[f][k][1]+%22'][i].value,'%22+fz[f][k][2]+%22')){f%22+f+%22['%22+fz[f][k][1]+%22'][i].selected=true;}}%22;}}bm+=%22}E()%22;bms.push(bm);}w= window.open('','','toolbar,width=150,height=100');for(f=0;f<bms.length;f++){w.document.write(%22<a href=\%22%22+bms[f]+%22\%22>Form #%22+(f+1)+%22</a><br />%22);}w.document.write(%22Drag the link onto your toolbar.%22);w.document.close();}B();

* For you bookmarklet nerds out there, the reason I couldn't just make this a regular link is due to escaping problems in the javascript. Simply escaping the " chars in the javascript is insufficient for a valid, working HTML link. I'd welcome any solutions you might come up with!

---

Test it out!

By this point, you should have the Form Filler bookmarklet generator installed as a bookmark in your browser. To see how the script works, do the following:

1. Fill in the various fields in the two (rather inane) forms below.
2. Click the "Form Filler" bookmark that you created earlier.
3. You'll see a popup appear containing one or two links. Drag the links to your toolbar: these are now custom-built javascript bookmarklets for populating the form(s).
4. Click the reset buttons for each form.
5. Click the newly created bookmarklet & see the forms be automatically populated. Neat, huh?
6. Now use it on your own forms!

Demo Form: How Brahman are You? Name Password Comments Gender Male Female None of your business Satyagraha kicks ass! Absolutely. Which foods do you like? Meat Veg Hummus How do you feel about the British? Ambivalent Positive Negative Select your favourite onomatopoeia errrr ommmm eeeee urrrrr ooooo

Demo Form Deux First Name Age

If you encounter any bugs or have feature suggestions, please contact me.