Building a URL with a Form via JavaScript?

January 23, 2008 12:09 PM

Anyone have a JavaScript trick to create a web form that builds a URL to send users to a pre-populated search?

I'm trying to build a form that can add various variables to a URL prior to submitting, conducting a search with prepopulated criteria. For example, I'd like the web form to say:

Find: [ ] Widgets [ ] Doodads [ ] Gizmos
Priced: [ ] Below $5 [ ] Below $500 [ ] Below $5000

The equivalent plain, non-trick HTML would look like this:

<input type="checkbox" name="type" value="widgets">
<input type="checkbox" name="type" value="doodads">
<input type="checkbox" name="type" value="gizmos">

<input type="checkbox" name="maxprice" value="0005">
<input type="checkbox" name="maxprice" value="0500">
<input type="checkbox" name="maxprice" value="5000">

But, instead of the form sending information the usual way, selecting the various elements would instead add, remove, or change variables within a URL to which it would send users when they clicked "Submit." For example, changing the above fields would, behind the scenes, build URLs like:

http://www.search.com/query?maxprice=0005
http://www.search.com/query?product=doodads
http://www.search.com/query?product=doodads&maxprice=0500

Users could not select various fields without breaking the URL, but also combine any series of variables available. Clicking submit would finalize the search URL and send them straight to the results. Presume that the receiving site would understand the variable names and values sent in the URL.

This seems pretty straightforward, but I can't find example code to do exactly this. Any pointers would be much appreciated!

posted by pzarquon to Computers & Internet (6 answers total)

Umm, I may be confused, but what you’re describing looks exactly like the normal form behaviour when the request method is GET.
posted by breaks the guidelines? at 12:26 PM on January 23, 2008 [1 favorite]

Best answer: That is to say, if your plain-vanilla HTML form looks something like this:

<form method="GET" action="http://www.search.com/query">
<input type="checkbox" name="type" value="widgets">
<input type="checkbox" name="type" value="doodads">
<input type="checkbox" name="type" value="gizmos">

<input type="checkbox" name="maxprice" value="0005">
<input type="checkbox" name="maxprice" value="0500">
<input type="checkbox" name="maxprice" value="5000">
<input type="submit">
</form>

Then the form variables are appended to the form’s action URI when the user submits the form.
posted by breaks the guidelines? at 12:30 PM on January 23, 2008

Response by poster: I think I understand what you're saying, but... does the GET method assemble the URL on the client side and submit it? Or is it still submitting the individual variables to the search application on the remote site?

Basically we're working with a custom search application that has its own forms doing things in .NET, but that the developers have built so that we can build a URL to get a search result with one click.

http://www.search.com/query?product=doodads&maxprice=0500&location=us&vendorid=4159

In other words, if I clicked that link I'd get my results on their site. Apart from using the integrated search form, using URLs like that is the only way I know how to preset variables in a search from outside. I thought I'd need a Javascript code to put the pieces together, but if not, do tell! And... well, obviously, 101-level tutorial sites or example code would be much appreciated.
posted by pzarquon at 12:35 PM on January 23, 2008

Response by poster: Oops. I posted my response to your one-line reply, and you've gone ahead and given me the code in the mean time. I'll try that!
posted by pzarquon at 12:36 PM on January 23, 2008

Yes, the URI for the GET is assembled by the browser on the client side, including the form variables. However, I don’t understand your question, “is it still submitting the individual variables to the search application on the remote site?”

Ignoring cookies, in a GET request, the only input to the remote application is the URI. It’s up to the remote application to interpret the meaning of any variables in the query portion of the URI.
posted by breaks the guidelines? at 12:46 PM on January 23, 2008

Response by poster: It worked! Of course I was thinking immediately, "You'd think this is how forms should work in the first place." And they do. And I'm an doofus. I shudder to imagine what madness I'd descend into if I tried to recreate this with JavaScript or something even more pointless. Thanks!
posted by pzarquon at 12:48 PM on January 23, 2008