Dive Into Greasemonkey

Teaching an old web new tricks

4.22. Overriding a built-in Javascript method

You can use the prototype property to override a native object's method.

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

// 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.


A submit event fires when a user submits a form in the usual way, i.e. by clicking the form's Submit button or hitting ENTER within a form. However, the submit event does not fire when the form is submitted via a script calling aForm.submit(). Therefore you need to do two things to capture a form submission: add an event listener to capture to submit event, and modify the prototype of the HTMLFormElement class to redirect the submit() method to your custom function.

← Intercepting user clicks
Parsing XML →