Generic order form with dynamic field content

URL grab for form field population

[Pricey]

Hi all,

I have several products on my website, which I have made a generic order form page for. What I want to do is have an order button on each of the product pages, that takes the user to the order form page and dynamically grab the previous URL or something from the previous page, and put it into a box in the form.

So If I were on the product page for blue widgets and the page url was www.mydomain.com/blue_widgets.html and I wanted to order, I would click the order button and be taken to www.mydomain.com/order.html where an order form would have 1 of the text fields would already be filled out with "Blue Widgets"

Now I have no clue how to do this so any suggestions would be very much appreciated!

[Bernard Marx]

Use a query in the URL....

On the 1st page:

When the button is clicked, if you have your keyWord string in a variable:

key = "Blue Widgets"

then:

location.href = escape("www.mydomain.com/order.html?" + key)

..The

escape()

will take care of spaces etc.

Then, on

[b]order.html[/b]

, at the top of the script, you can grab the?portion, and make a variable:

var key = unescape(location.search.substring(1))

The

search

property of the

location

includes?, so you miss that bit out with

substring(1)

Now you can stick that into your box (oooer)

Any good?

[will1480]

yeah, you could also have the form post to that page a hidden variable with whatever values you needed of that product.

On the actual order page just read the posted variables and create the content based on those variables. Also, if you only have a couple of products maybe just make seperate order pages. Otherwise you should really be creating the product description pages dynamically from a database.

Start to learn PHP/MySQL or something if you are ever planning on expanding your sales. It will be beneficial.

[Pricey]

Thanks for that guys,

I can use:

<script language="JavaScript" type="text/javascript"><!--
var qs = location.search.substring(1);
var nv = qs.split('&');
var url = new Object();
for(i = 0; i < nv.length; i++)
{
eq = nv[i].indexOf('=');
url[nv[i].substring(0,eq).toLowerCase()] = unescape(nv[i].substring(eq + 1));
}
//-->
</script>
<script language="JavaScript" type="text/javascript"><!--
function displayProduct() { 
document.order.ORDER_requirement.value=(url["product"]);
}
//-->
</script>

and

<textarea rows="3" name="ORDER_requirement" cols="40" ></textarea>

on my order.shtml page - that will pick up the query string. but how do I get the location.href link to work?

I have tried:

<a href='javascript:self.location.href= escape("http://www.mydomain.co.uk/order.shtml?" + Blue Widgets);'>

but this just brings up a js error.

I have also tried:

<a href="#" onClick="location.href= escape("http://www.mydomain.co.uk/order.shtml?" + Blue Widgets)";'>

but this just adds a "#" to the end of my url and goes nowhere.

Is there any way to make this link work properly?

[Bernard Marx]

I'm looking at the top part now. In the meantime, the prob with the link part is mainly the quoting. If you are going to hard code the keyword into the link, there's no need for javascript inside, just put it in the href (pre escaped):

<a href = "http://www.mydomain.co.uk/order.shtml?Blue%20Widgets">

--------------------------

The script you've posted for the receiving page (not that I've tested it, mind), is for turning a query string in this form:

[blue]?[/blue]product[red]=[/red]banana[blue]&[/blue]color[red]=[/red]yellow[blue]&[/blue]size[red]=[/red]large

into an object that could be represented literally:

url =
{
product:"banana",
color :"yellow",
size :"large"
}

This is a good mechanism for handling the passing of multiple property : value pairs, but in your case it's not necessary, as you are only sending one value, and you know what it's used for (ie the property it represents).

However, if you do use this script (perhaps for later enhancements), then you'll need to send the URL as:

http://www.mydomain.co.uk/order.shtml?product=Blue%20Widgets"

(I don't know why this is so small!)

[Pricey]

Yeah that works and makes a nice query string. The only problem is that I didn't make the code for the order page and it uses unescape. The text box just shows up with "undefined" :(

[edit]
Damn you edit faster than I post! I'll try out the new url string[/edit]

[Pricey]

OK, some luck... It does work kinda..

The link now goes through, and fills in the box on the order page BUT the text box shows up the 20%'s in the word!

[Bernard Marx]

Hmm. OK. Are you saying that you don't have control over the order page's script?

I've stickied you my version of the query string parser (a couple of added bits in it), but if you can't use it, we'll have another look.

[Pricey]

Thanks Bernard, I'll take a look.

[Bernard Marx]

I tested the original script that you posted.
I think it's a little strange - it uses

[blue]split[/blue]

first, then degenerates to

[blue]substring[/blue]

later.
..doesn't matter though, because is does work with

[blue]<a href = "http://www.mydomain.co.uk/order.shtml?product=Blue%20Widgets">Blue Widgets</a> [/blue]

- no %'s!

[Pricey]

Hi Bernard, I sticky'd you the site I have it running on so you can see the exact outcome.

/Phil

[Pricey]

Ah, crazy yes, that worked! Bernard you legend!

Well it always turns out to be something simple (I was using 20% instead of %20 - duh).

With that code I can make several order now buttons and specify different sizes or colours too :D

[Bernard Marx]

...in my own teatime too.

Nice site.

There is a slightly different approach too. If the idea is to create an object at the other end, you could put more work in on one side, with less on the other. There's no real point to that - unless you want extra functionality...

Instead of sending (I've left out any escaping):

?product=apple&color=green&size=5

You send:

?{product:"apple",color:"green",size:5}

Then getting the object at the other end is simply:

eval( "var param=" +location.search.substring(1) )

Because we sent an object literal over. This becomes useful if you want to send over nested information:

?{custId:#123;products:[{type:'banana',size:'large'},{type:'apple',color:'green'}]}

I have an object serialiser for making these kinds of strings, but it's got ..er.. teething troubles.

[Bernard Marx]

Sorry that's:

?{custId:#123[red],[/red]products:[{type:'banana',size:'large'},{type:'apple',color:'green'}]}