Comments on: Building a URL with a Form via JavaScript?

Question: Building a URL with a Form via JavaScript?

pzarquon — Wed, 23 Jan 2008 12:09:23 -0800

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!

By: breaks the guidelines?

breaks the guidelines? — Wed, 23 Jan 2008 12:26:01 -0800

Umm, I may be confused, but what you're describing looks exactly like the normal form behaviour when the request method is GET.

By: breaks the guidelines?

breaks the guidelines? — Wed, 23 Jan 2008 12:30:13 -0800

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.

By: pzarquon

pzarquon — Wed, 23 Jan 2008 12:35:46 -0800

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.

By: pzarquon

pzarquon — Wed, 23 Jan 2008 12:36:26 -0800

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!

By: breaks the guidelines?

breaks the guidelines? — Wed, 23 Jan 2008 12:46:47 -0800

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.

By: pzarquon

pzarquon — Wed, 23 Jan 2008 12:48:50 -0800

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!