Automate Form Submissions using Bookmarklets

By Rob Gravelle

Automate Form Submissions using Bookmarklets

I recently learned of a technically inclined user who wrote "macros" to streamline data entry into a complex enterprise Web application. My initial reaction was: "There are no macros in Internet Explorer so how did he hook into the page?" It turned out that he was using something called a Bookmarklet. I don't know how I managed to never hear about them for all these years, but I could immediately envision a myriad of uses for them. In today's article, I'll explain what they are, how they work, and how to use them to automatically fill out and submit a form one time or a thousand times over!

What is a Bookmarklet?

Let's start with what a bookmark is. It's just a link to a Web resource that usually begins with the "http:", "file:", or "ftp:" protocol. There is another special prefix that browsers recognize: "javascript:". It tells the browser to execute everything that comes after as JavaScript code. You can try it yourself in a hyperlink like so:

<a href="javascript: alert('Howdy ho!');">Try this out!</a>

Try this out!

Bookmarklets arrived on the scene as a feature of Netscape in the early 2000s. Since then, other browsers have jumped on board. There has been a lot of speculation that the end may be near for Bookmarklets as browsers tighten up on security, but for now it's open season!

Creating a Bookmarklet

How you create a Bookmarklet will differ based on what browser you are using, but here is how you would go about it in Chrome v43:

  1. Click on Bookmarks->Bookmark Manager from the main settings button in the upper-right corner.
  2. You should see a new tab with the bookmarks and folders listed.
  3. Click the New button.
  4. Enter the javascript code into the URL textbox.
  5. Click the Add button to create the new Bookmarklet.

There is one important difference between a hyperlink and a Bookmarklet and that is that the latter runs within an anonymous function:

javascript: (function() { alert('Howdy ho!'); })();


Maximum URL Length and Workaround via Script Injection!

The length of a Bookmarklet is restricted to the maximum allowable URL length. While difference from browser to browser, a good rule of thumb is that it should not exceed 2000 characters. That would make heavy duty scripting out of the question were it not for the fact that a Bookmarklet has access to a page's entire DOM and scope. Hence, it is possible to call other JS functions.

Script Injection might sound like a malicious hacking attack, but in the case of Bookmarklets, it's A-OK because your executing your own code and it is only JS after all. It's not like you can reformat your C drive by accident! Here's a Bookmarklet (formatted for readability) that creates a <SCRIPT> element and sets the src attribute to a script that is hosted on my own server:

javascript: (function () {
  var jsCode = document.createElement('script');    
  jsCode.setAttribute('src', 'http://robgravelle.com/js/Bookmarklet.js');

Loading JS Libraries

Working with forms is a lot easier using a JS library like jQuery. We can load it from the Google repository much as we did with our own script. To run our script, we can attach a handler to the script's onload event. That way we can be sure that the library is done loading:

if (window.jQuery === undefined) {
    var script    = document.createElement( 'script' );
    script.src    = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
    script.onload = function() { fillForm; sendData; }
else {

The fillForm() Function

As the name implies, all that the fillForm() function does is populate the form fields. I used Chrome's Inspect Element command to lookup all of the field names. It also helps to identify hidden fields:

function fillForm() {
    $('input[type="radio"][name="REF"][value="Y"]').attr('checked', 'checked')
    $('input[name="REF_NAME"]').val('John Bush');

The sendData() Function

I did something a little different for submitting the form contents. Rather than emulate a click of the Submit button, I opted to serialize the form and send it off to the server via an Ajax POST request. That allows me to stay on the current page, thereby setting the stage for further submissions. Take a closer look at the success() handler and you'll see a recursive call to sendData() within a setTimeout():

function sendData() {
   var $form = $('form[name="DATA_FORM"]'),
       url   = location.protocol + '//' + location.host + $form.attr('action'), 
       $data = $form.serialize();
      type: "POST",
      url: url,
      data: $data,
      //send again in 5 minutes
      success: function() { setTimeout(sendData, 5 * 60 * 1000); }


There is no shortage of bookmarklet repositories out there. Here's one. Here's another. If you think of any other interesting uses for bookmarklets, send me an email!

Rob Gravelle

Rob Gravelle resides in Ottawa, Canada, and is the founder of GravelleWebDesign.com. Rob has built systems for Intelligence-related organizations such as Canada Border Services, CSIS as well as for numerous commercial businesses.

In his spare time, Rob has become an accomplished guitar player, and has released several CDs. His band, Ivory Knight, was rated as one Canada's top hard rock and metal groups by Brave Words magazine (issue #92) and reached the #1 spot in the National Heavy Metal charts on Reverb Nation.

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date