Dive Into Greasemonkey

Example: Do something before a form is submitted

function newsubmit(event) {
    var target = event ? event.target : this;

    // do anything you like here
    alert('Submitting form to ' + target.action);

    // call real submit function
    this._submit();
}

// capture the onsubmit event on all forms
window.addEventListener('submit', newsubmit, true);

// If a script calls someForm.submit(), the onsubmit event does not fire,
// so we need to redefine the submit method of the HTMLFormElement class.
HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = newsubmit;

There are two things going on here. First, I am adding an event listener that traps submit events. A submit event occurs when the user clicks a Submit button on a form. However, if another script manually calls the submit() method of a form, the submit event does not fire. So, the second thing I do is override the submit method of the HTMLFormElement class.

But wait, there's more. Both the event listener and the method override point to the same function, newsubmit. If newsubmit gets called via a submit event, the event argument will be populated with an event object that contains information about the event (for example, event.target will be the form being submitted). However, if a script manually calls the submit method, the event argument will be missing, but the global variable this will point to the form. Therefore, in my newsubmit function, I test whether event is null, and if so, get the target form from this instead.