Industry guru Dave Taylor offers free tech support on a wide variety of technical and business topics, including HTML, Apple iPhone, online advertising, Cascading Style Sheets, Web design, management, Unix, Linux, search engine optimization, online dating, Mac OS X, shell script programming and Microsoft Windows.

How do I reverse engineer a complicated Web form?

I'm making a website that helps kids at my school find nearby restaurants. I wanted directions by bus, and there's a Trip Planner site that will plan the bus trip. How can I make it so that visitors can click the link and have the starting and ending addresses pre-filled in?


Dave's Answer:

The first thing I had to do was learn a bit about King County, Washington, because the site you're talking about is the King County Metro Transit Trip Planner. I've been to King County, but don't have a clue about what's where and what would even be a route to test.

After much thrashing around, however, I found a start and end address that gave us a decent bus path with the trip planner, a trip that is about an hour (assuming all the busses are on time there in Washington).

The start point: 3700 EAST VALLEY RD

and the end point: KING STREET CENTER

You can enter these two points on the King Count Trip Planner just to see how it works. The form has six input fields, the start point, the end point, the date and time of the trip, maximum walking range, route preferences and whether you need a wheelchair accessible trip or not. Lots of options, but for your project, most of these can be pre-filled and hidden.

But first things first, let's crack open the source to the page and see what the form looks like:

<!-- The Entry Form -->
<form name="FormName" action="itin.pl" method="Post">
<input type="hidden" name="action" value="entry">
<input type="hidden" name="resptype" value="U">
<input type="hidden" name="Time" value="">

lots and lots of lines skipped

<!-- Action Buttons -->
<input type="submit" name="Submit" value="Plan Trip">
</form>

Lots of lines of code comprise this form, but the key fields to seek are the form tags along with any input tags. I've gone through and trimmed things down to their essence for the first few fields, so you can see what's happening:

<b>1. Where does your trip start?</b><br>
<input type="text" name="Orig" size="40" maxlength=80 value=""><br>

<b>2. Where does your trip end?</b><br>
<input type="text" name="Dest" size="40" maxlength=80 value=""><br>

<b>3. When is your trip?</b><br>

<input type="text" name="Date" size="11" value="3/1/08"> (MM/DD/YY)
<input type="radio" value="D" name="Arr" checked>

That last line is an example of how we can unwrap a form element, in this case a radio button that lets you specify whether the time you enter is the departure or arrival time. To show how this works, let's change the time=departure field to be hidden so you never see it again. Easily done:

<input type="hidden" value="D" name="Arr" />

Now you're getting a sense of how to tweak the form!

Turns out that, in addition to the many hidden fields already in the form, there are only about ten fields in total, named Orig, Dest, Date, D, hour_time, minute_time, ampm_time, Walk, Min and Atr. These refer, as far as I can tell, to origin, destination, date of trip, whether you're entering departure or arrival time, time of trip (three fields), how far you're willing to walk to get to bus stops, what to minimize (e.g. length of trip, number of transfers), and whether you need accessible (e.g., handicapped) transportation.

Lots to unwrap, but if you chop out all the non-FORM elements and turn every "input" tag to have "type=hidden", you're most of the way there. A couple of trickier elements refer to the date and time of the trip. Ideally you want to actually use the current date and time, but failing that, specify a neutral time and date, like mid-week at noon (since weekend schedules are often quite different). Not a great solution, but it'll get us going for this project.

For Orig and Dest, we'll use the values we identified earlier, 3700 EAST VALLEY RD and KING STREET CENTER.

The result of the core form fields are now:

<input type="hidden" name="Orig" value="3700 EAST VALLEY RD">
<input type="hidden" name="Dest" value="KING STREET CENTER">
<input type="hidden" name="Date" value="3/1/08">
<input type="hidden" value="D" name="Arr">
<input type="hidden" name="hour_time" value="12">
<input type="hidden" name="minute_time" value="00">
<input type="hidden" value="pm" name="ampm_time">
<input type="hidden" name="Walk" value="0.50">
<input type="hidden" value="T" name="Min">

One more element is the submit form, of course:

<input type="submit" name="Submit"
value="Take The Bus to King Street Center!">

I am imagining that for your project the origin address is going to be the address of the school, so that's something you could set once and use that same value for each and every address you seek. The destination address would be the address of the individual restaurant: in our example we're assuming a restaurant at the King Street Center.

Put it all together and include all those crazy hidden values that are already in the form and you can actually reduce this all down to a single button:

That should give you enough data to turn your dream into a Web reality!



Help others find this article at Del.icio.us, Digg, Netscape, Reddit, and Stumble Upon    

Subscribe!

Never miss another useful Q&A article again! Subscribe to AskDaveTaylor with Google Reader.

Comments
Rather amazingly, there are no comments on this article yet.

I have a lot to say, but ...
Starbucks coffee cup I have a lot to say, and questions of my own for that matter, but most of all I'd like to say thank you for all your efforts on this Web site by buying you a chai!

I do have a comment, now that you mention it!











Remember personal info?


Please note that I will never send you any unsolicited commercial email. Ever.

While I'm at it, please note that by submitting a question or comment you're agreeing to my terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site.









Uniblue: Free Virus Scan

Follow me on Twitter @DaveTaylor

Search
Find just the answers you seek from among our 2300+ free tech support articles by using our Lijit search engine.


Help!





Subscribe to
Ask Dave Taylor!

Add to Google Reader
Add to My Yahoo!
Subscribe in NewsGator Online

RDF   XML

Free Updates!
Sign up and get free weekly updates and special offers on books, seminars, workshops and more.


Recent Entries
Book Links
© 2002 - 2009 by Dave Taylor. All Rights Reserved.

Note: This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this web site or on any linked site.

[whiteboard marker tray]
"Ask Dave Taylor®" is a registered trademark of Intuitive Systems, LLC.