The Code Cave

July 19, 2006

Listing the Forms and Fields on a page in Internet Explorer or Maxthon

Filed under: HTML — Brian @ 12:00 pm

This post is an introduction to what I’ve been researching in my spare time over the last few weeks. It will be the first in a series of posts about form submission. It will lead you basically along the path that I took in discovering this information, and will hopefully allow you to skip over some of the trouble spots along the way. I’ll note each of the trouble spots in the comments in the doc (for instance in this one I include a note about the value of a button also being submitted with the form).

This HTML file builds on top of the work that I did on with the Copy as Text Link tool referenced elsewhere on this site. However, this routine processes the currently active webpage/frame and generates a report of the Forms and fields on that page. For each form it shows its name, action and then list the inputs on that form. For each input, it shows its name and value. From this information, you can see what is being tracked between pages on a website. You could also use this information to debug an entry form you are creating. It could also be used to generate the form submission information that will be generated by a certain action so that it can be repeated programmatically in the future.

This routine will only work in IE right now and older releases of Maxthon. It could easily be transposed to other browsers and tools. The process should be relatively easy to follow thanks to Microsoft’s Document Object Module (DOM) technology. DOM allows HTML code to be accessed as if it were Object Oriented. In other words, this routine doesn’t work with the HTML source code. Instead it asks IE for specific parts of the webpage one at a time. This allows each of the various parts/divisions of any web page to have its own particular properties and methods. This routine asks asks the document object for the list of forms it contains. It then asks each form for a list of fields. It displays each in its turn.

To install this file in IE, right click on the following link and choose Save Target As. Then in the destination window type %WINDIR%\web\formlist.htm and press enter.

RIGHT CLICK THIS LINK

%windir% is an environment variable that represents your Windows directory. So you can put C:\Windows\Web\formlist.htm if you know you have a c:\Windows directory.

Then choose Start->Run and put in this text and then press enter:

reg ADD "HKCU\\Software\\Microsoft\\Internet Explorer\\MenuExt\\F&orms and Fields" /ve /t REG_SZ /d "%WINDIR%\\web\\formlist.htm" /f

That will update your registry to point to the file. If you have problems, use this batch file instead. It contains the same command but will not be corrupted by windows.

Then close all instances of IE.

Now browse to a web page that has a form, most of them do now-a-days.

Right click anywhere on the text of the form and choose Form and Fields from the menu.

You’ll now be able to see all sorts of information about the page you were on and the fields and hidden fields it contains.

BTW, this routine uses a pop up window. Popup blockers like the Google Toolbar will try to block this form. So, you just might have to hold down the CTRL key as you choose Form and Fields to allow this to work.

Also, FYI it works in Maxthon through at least version 1.5.2 build 21. I think build 23 reworks the context menu stuff, but don’t quote me on that.

Enjoy!

Sample output from FoxNews.com

(Source code follows)
NOTE: There is now a reference to the final location of this file in the source code. If you install this as something other than c:\windows\web\formlist.htm you must now update the source code.

PLAIN TEXT
JAVASCRIPT:
  1. <script type=“text/javascript” defer>
  2. /*
  3. Forms & Fields List
  4. Copyright (C) 2006 TheCodeCave.com
  5. Brian Layman
  7. Processes the currently active webpage/frame and generates a report of the Forms and fields on that page.
  8. For each form it shows its name, action and then list the inputs on that form.  For each input, it shows
  9. its name and value.  From this information, you can see what is being tracked between pages on a website.
  10. You could also use this information to debug an entry form you are creating.  It could also be used to
  11. generate the form submission information that will be generated by a certain action so that it can be
  12. repeated programatically in the future.
  14. The process should be relatively easy to follow thanks to Microsoft’s Document Object Module (DOM) technology.
  15. DOM allows HTML code to be accessed as if it were Object Oriented. In other words, this routine doesn’t work
  16. with the HTML source code. Instead it asks IE for specific parts of the webpage one at a time.  This allows
  17. eacg of the various parts/divisions of any web page to have its own particular properties and methods.  This
  18. routine asks asks the document object for the list of forms it contains.  It then asks each form for a list
  19. of fields.  It displays each in its turn.
  21. Please note that when a form is submitted the input is not limited to fields.  The button/img used to submit
  22. the form also contains a value.  In this way, the destination action can determine what button was pressed.
  23. So, you will likely see more fields listed in this routine than are obvious when glancing at the screen.  Also
  24. just because a value is listed on this form, does not mean that it will reach the final form.  Javascript can
  25. be used to validate/alter information before the form is submitted.
  27. To use this file, save it as:
  28. %WINDIR%\web\formlist.htm
  32. You can put C:\windows in there for %WINDIR% id your computer doesn’t like it or if you know you have a c:\windows
  33. directory.  Then choose START->Run and put in this text and then press enter:
  34. reg ADD "HKCU\Software\Microsoft\Internet Explorer\MenuExt\F&orms and Fields" /ve /t REG_SZ /d "%WINDIR%\web\formlist.htm" /f
  37. Version Notes
  38. ————————————————————————————————————————
  39. 1.0 BL   2006-07-18 Initial version
  40. 1.1 BL   2006-07-19 Fixed "access is denied" error that blocked the pop up on some systems
  42. */
  43.  
  44. // External menuArguments returns the window object where the context menu item was executed.
  45. var parentwin=external.menuArguments;
  46.  
  47. // If no form was used to call this routine, calling documents title will be blank.
  48. // If that is the case, display a message.
  49. // NOTE: Referring to parentwin or parentwin.document only here will cause IE in the else clause.
  50. // The title seems to be one of the only safe properties to access.
  51. if (!parentwin.document.title)
  52. {
  53.   document.writeln (“<html>”);
  54.   document.writeln (“<head>”);
  55.   document.writeln (“<title>TCC Form List</title>”);
  56.   document.writeln (“</head>”);
  57.   document.writeln (“<body>”);
  58.   document.writeln (“This file is meant to be accessed from a popup menu.  It is not a standard HTML file.<br/>”);
  59.   document.writeln (“<br/>”);
  60.   document.writeln (“If you were trying to save this file to your local drive, go back to the original link, right click and choose Save Target As.<br/>”);
  61.   document.writeln (“<br/>”);
  62.   document.writeln (“<br/>”);
  63.   document.writeln (“<center>For more information, please visit <a href=’http://www.thecodecave.com/article208′ Title=’Cold Storage for my best ideas…’>The Code Cave</a> - Brian<br/><br/><br/><a href=’javascript:window.close()’ style=\”color:#FF0000;text-decoration:none\”>close</a></center><br/></body>”);
  64.   document.writeln (“</font>”);
  65.   document.writeln (“</body>”);
  66.   document.writeln (“</html>”);
  67.  
  68. }
  69. else {
  70.   // At this point we know that this file was reached from a popup menu on a webpage.
  71.  
  72.   // Now we need to create a new window.  The first task is to describe the way the window should appear.
  73.   var new_window_features = new String (“toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes, resizable=yes, top=0, left=0, width=400, height=”);
  74.   new_window_features = new_window_features + (screen.height - 100);
  75.   // Use those properties to create a new window for our output.
  76.   // NOTE: The second parameter here is the name of the new target window.  Having a standard name will force all form listings to appear in the same
  77.   // window/tab.  If you wish to get a new window/tab for every listing, change this parameter to say "_blank" instead.
  78.   // IMPORTANT: The first parameter, the URL would normally be blank.  After all, what is desired is a blank slate on
  79.   // which to build the new report.  However, some IE installations block blank window.open calls.  This is due to th
  80.   // local host being in a different security zone from the web page you are surfing.  So, we trick the window into
  81.   // thinking that it is already in the local domain, and therefore the window.open succeeds.
  82.   var new_window = window.open(“file:///C:/windows/web/formlist.htm”, “tcc_formlister”, new_window_features);
  83.   var new_document = new_window.document;
  84.  
  85.   // Now create a document in that window.
  86.   new_document.open();
  87.  
  88.   // Define the header of the form and a script to close the window when we are done.
  89.   new_document.writeln (“<html>”);
  90.   new_document.writeln (“<head>”);
  91.   new_document.writeln (“<title>TCC Field List</title>”);
  92.   new_document.writeln (“</head>”);
  93.   new_document.writeln (“<body topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0>”);
  94.   new_document.writeln (“<font style=\”font:    8pt Verdana, Arial, Helvetica, Sans-serif; line-height:18pt;\”>”);
  95.   new_document.writeln (“<script language=javascript>function navigateClose(str){if (document.my_parent != null){document.my_parent.location.href=str;window.close();}else{alert(\”Please wait until the list has populated.\”);}}<\/script>”);
  96.   new_document.writeln (“List forms and fields in <b>” + parentwin.document.title + “</b>:<ol>”)
  97.  
  98.   // Get the list of forms from the original document
  99.   var forms = parentwin.document.forms;
  100.   new_document.writeln (“<b>This document contains: “ + forms.length + ” forms.</b>”);
  101.   new_document.writeln (“<br/>”);
  102.   new_document.writeln (“<hr/>”);
  103.   new_document.writeln (“<br/>”);
  104.   new_document.writeln (“<b>Form and Field listings</b><br/>”);
  105.   new_document.writeln (“<br/>”);
  106.   new_document.writeln (“This section will list all of the forms and their fields.<br/>”);
  107.   new_document.writeln (“<br/>”);
  108.  
  109.   // Iterate all of the forms and display their information and then the fields.
  110.   for (i = 0; i <forms.length; i++)
  111.   {
  112.     curform = forms[i];
  113.     new_document.writeln (“<br/><h2>Form “ + (i + 1) + “: “ + curform.name + “</h2>”);
  114.     new_document.writeln (“<b>Submits to: </b>” + curform.action + “<br/><br/>”);
  115.     new_document.writeln (“<b>Fields:</b> (FieldName: Value)<br/>”);
  116.  
  117.     // There are several methods to determine the fields that are used on a form.
  118.     // In this example we will request an element array.  We will request a list of
  119.     // all input tags.
  120.     var elements = curform.getElementsByTagName(“input”);
  121.  
  122.     // The list will now be iterated and the name and current value will be displayed for each.
  123.     // Other properties such as default value could be displayed if this were desired.
  124.     for (var j = 0; j <elements.length; j++)
  125.     {
  126.       var curelement = elements[j];
  127.       new_document.writeln (curelement.name +“: “ + curelement.value + “<br/>”);
  128.     }
  129.  
  130.     // This is a freebie that will be used as a reference in other articles on TheCodeCave.com
  131.     // This routine quickly builds Delphi source to assign the post data to a variable.
  132.     // Since post data can be any length, this routine breaks the lines up at around 255
  133.     // characters for easier handling.
  134.     // I suppose it should truncate off the trailin " + & + " and put in a semicolon, but I’ll
  135.     // leave that up to you to do if you think you’ll actually use this.
  136.     new_document.writeln (“<br/>”)
  137.     new_document.writeln (“<br/>”)
  138.     new_document.writeln (“<b>DELPHI ENCODEDED DATA STRING</b> - Paste this text into a Delphi Form Post to automate the post.<br/>”)
  139.     new_document.writeln (“<br/>”)
  140.     new_document.writeln (“EncodedDataString := “);
  141.     var linelen = 0;
  142.     for (var j = 0; j <elements.length; j++)
  143.     {
  144.       var curelement = elements[j];
  145.       var scrap = “HTTPEncode(’” + curelement.name + “‘) + ‘=’ + HTTPEncode(’” + curelement.value + “‘) + ‘&’ + “
  146.  
  147.       if ((linelen + scrap.length)> 255) {
  148.          new_document.writeln (“<br/>”)
  149.          linelen = 0;
  150.       }
  151.       else {
  152.         linelen = linelen + scrap.length;
  153.       }
  154.       new_document.writeln (scrap);
  155.     }
  156.     new_document.writeln (“<hr/>”)
  157.  
  158.   }
  159.   // Close off the document with a footer.
  160.   new_document.writeln (“</ul><center>For more information, please visit <a href=’http://www.thecodecave.com’ Title=’Cold Storage for my best ideas…’>The Code Cave</a> - Brian<br/><br/><br/><a href=’javascript:window.close()’ style=\”color:#FF0000;text-decoration:none\”>close</a></center><br/></body>”);
  161.   new_document.writeln (“</font></html>”);
  162.   new_document.close();
  163.  
  164.   // Assign the parent form to the new document so that when the parent page is closed, this page is closed too.
  165.   new_document.my_parent = parentwin;
  166. }
  167. </script>

1 Comment »

  1. [...] I’ve made two changes to the Forms and Field lister I posted yesterday - the original post has been altered to include them. [...]

    Pingback by The Code Cave — July 20, 2006 @ 10:45 am

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress