< Day Day Up > |
Hover over a form's Submit button to see where the form will be submitted. If you hover your cursor over a link, Firefox will show you the target URL in the status bar. But there is no similar functionality for forms. Clicking the Submit button could send you anywhere, and you won't know where until you're already there. This hack modifies web forms to display the form method (GET or POST) and action (target URL) in a tool tip when you hover the cursor over the form's Submit button. 4.2.1. The CodeThis user script will run on all pages. The code itself is divided into three parts:
Save the following user script as displayformaction.user.js: // ==UserScript== // @name Display Form Action // @namespace http://diveintomark.org/projects/greasemonkey/ // @description display form submission URL as tooltip of submit button // @include * // ==/UserScript== for (var i = document.forms.length - 1; i >= 0; i--) { var elmForm = document.forms[i]; var snapSubmit = document.evaluate("//input[@type='submit']", elmForm, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); for (var j = snapSubmit.snapshotLength - 1; j >= 0; j--) { var elmSubmit = snapSubmit.snapshotItem(j); elmSubmit.title = (elmForm.method.toUpperCase() || 'GET') + ' ' + elmForm.action; } } 4.2.2. Running the HackAfter installing the user script from Tools Install This User Script, go to http://www.google.com and hover your cursor over the Google Search button. You will see a tool tip with the form action (GET) and the form submission URL (/search), as shown in Figure 4-1. Figure 4-1. Google form submission tool tip4.2.3. Hacking the HackOne possible improvement on this hack would be to include the names of the submitted form fields in the tool tip: // ==UserScript== // @name Display Form Action // @namespace http://diveintomark.org/projects/greasemonkey/ // @description display form submission URL as tooltip of submit button // @include * // ==/UserScript== for (var i = document.forms.length - 1; i >= 0; i--) { var elmForm = document.forms[i]; var arElmFormFields = elmForm.getElementsByTagName('input'); var arNames = new Array(); for (var j = arElmFormFields.length - 1; j >= 0; j--) { var sName = arElmFormFields[j].name || arElmFormFields[j].id; if (sName) { arNames.push(sName); } } var sFormFields = arNames.join(', '); var snapSubmit = document.evaluate("//input[@type='submit']", elmForm, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); for (var j=snapSubmit.snapshotLength-1; j>=0; j--) { var elmSubmit = snapSubmit.snapshotItem(j); elmSubmit.title = (elmForm.method.toUpperCase() || 'GET') + ' ' + elmForm.action + ' with ' + sFormFields; } } If you want even more control over form submissions, check out POST Interceptor [Hack #45]. |
< Day Day Up > |