Greasemonkey Hacks

Hack #45. Intercept and Modify Form Submissions

Gain the ultimate control over web forms.

Web forms have two modes: GET and POST. Search engines are examples of forms that use the GET method; once you submit the form, you can see all the form values in the URL of the next page. POST forms, on the other hand, are opaque. You can tell you submitted the form, but the URL doesn't reveal any information about what data you actually submitted. Most e-commerce sites, weblog commenting applications, and even some site searches use the POST method.

This hack gives you the ultimate control over POST forms. When you submit the form, it pops up a window that displays all the form fields and their values, and lets you edit any of the fields—even fields that were hidden on the original page.

The Code

This user script runs on all pages. It looks for forms with a method="POST" attribute and adds an onsubmit event. As discussed in "Enter Textile Markup in Web Forms" [Hack #35] , this is not enough to guarantee that the script will intercept all form submissions, so we also override the submit method on the HTMLFormElement class.

When the user attempts to submit a form, the script looks for all editable or hidden form fields and constructs a form-editing window. In this window, the user can modify the value of any form field and submit the modified values, submit the original form values, or cancel the form submission altogether.

Save the following user script as post-interceptor.user.js:

 // ==UserScript== ...