Skip to content

Hooking HTML Forms with Javascript

August 31, 2010

While working on a Safari extension, I came up with some Javascript code to hook HTML forms and capture the input data prior to the call to the form’s action. This could prove useful in browser plugins or something more nefarious like persistent XSS.

It works by either:

  • Setting the form’s onsubmit handler (if there wasn’t one set already)
  • Creating a dummy button with a custom onclick handler that will call the specified callback prior to calling the normal onsubmit handler.

The code is fairly straightforward (minus a single compatibility issue between IE8 and and Safari/Firefox/Chrome regarding form submission).

Anyway, here’s the code:

function hookform(f, callback)
{
   if (f.onsubmit == null) {
      // No onsubmit handler, so install ours directly.
      f.onsubmit = function() { callback(this); };
   }
   else {
      // Need to find the submit input
      var is = f.getElementsByTagName('input');
      // Adding a dummy button messes with the length
      cnt = is.length;
      for (i = 0; i < cnt; i++) {
         if (is[i].type.toLowerCase() == 'submit') {
            // Create a dummy element
            var dummy = document.createElement('button');
            // Copy the submit button's name
            dummy.innerHTML = is[i].value;
            // Set the handler to call the callback
            // and then the original onsubmit handler.
            if (navigator.appName.indexOf('Microsoft') == 0) {
               dummy.onclick = function() {
                  callback(this);
                  var r = this.parentNode.onsubmit();
                  if (r) { this.parentNode.submit(); }
               }
            }
            else {
                // SAFARI MAC, SAFARI IPHONE, FIREFOX, CHROME
               dummy.onclick = function() { callback(this); };
            }
            // Insert into the DOM and hide the submit button
            f.insertBefore(dummy, is[i]);
            is[i].style.display = 'none';
         }
      }
   }
}

Use it like so:

function hook_callback(btn) {
   alert("callback!");
}
hookform(document.getElementById('f1'), hook_callback);

Let me know if (and how) anyone besides me finds this useful.

Edit: Uploaded source to github

Advertisements

From → Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: