Generating online price help (please!)

**Green** · 03-12-2005, 02:50 PM

Hi there,

I am very very new to this and would really appreciate a little help!

I am trying to create an HTML version of a FLASH site (www.rfkharris.com) as I have had feedback that people find it hard to view.

I am trying to generate an price depending on a user's selection from three different drop down menu's. e.g if 'brown' is selected from the first menu, 'red' from the second and 'green' from the third a certain cost will be generated which would be different if the combinations selected were different. The selection chosen should generate a URL as well as the price so that, should the user be happy with the price, they can progress to pay - oh dear, this all sounds awfully complicated!

When looking through the threads on this forum to see if I could find the answer there I found the following code which did exactly what I wanted if I had only one column and did not need to generate a URL as well, I have posted this here for reference.

Many thanks in advance, all help appreciated

<html> <head>
<script language="javascript">
var arrProducts = new Array();
arrProducts[0] = "Widget 1";
arrProducts[1] = "$24.95";
arrProducts[2] = "Widget 2";
arrProducts[3] = "$16.95";
arrProducts[4] = "Green Widget";
arrProducts[5] = "$4.95";
arrProducts[6] = "Blue Widget";
arrProducts[7] = "$7.95";
arrProducts[8] = "Turbo Widget";
arrProducts[9] = "$34.95";

function getPrice(widgetName, priceField)
{
//Iterate through the array
for(i=0;i<arrProducts.length;i++)
{
//Found the product
if(arrProducts[i] == widgetName)
{
//Increment i because the price is
//always the next array element
i++;

//Get the price
var price = arrProducts[i];

//Exit the loop
break;
}
i++;
}

//Update the form element

priceField.value = price;
}
</script>
</head>
<body>

<form name="theForm">

<select name="widgets"
onChange="getPrice(this.options[this.selectedIndex].value, theForm.price);">
<option value="Widget 1">Widget 1</option>
<option value="Widget 2">Widget 2</option>
<option value="Green Widget">Green Widget</option>
<option value="Blue Widget">Blue Widget</option>
<option value="Turbo Widget">Turbo Widget</option>
</select>
<input type="text" name="price" />

</form>

</body>
</html>

**reload2** · 03-13-2005, 03:46 AM

I have a similar problem and would like to hear about it too. Anyone?

**Phaedrus** · 03-13-2005, 12:28 PM

Hi, I don't have time right now but if someone hasn't helped you by tonight when I get home I'll put something together for you.

**Phaedrus** · 12:52 AM

HTML Code:

<html>
<head>
<title>Test</title>
<script language="javascript">
var arrBasicBlue=["Blue","5","5.00","basicBlue5url","10","10.00","basicBlue10url","L","20.00","basicBlueLifeUrl"];
var arrBasicGreen=["Green","5","7.00","basicGreen5url","10","12.00","basicGreen10url","L","22.00","basicGreenLifeUrl"];
var arrBasicRed=["Red","5","9.00","basicRed5url","10","14.00","basicRed10url","L","24.00","basicRedLifeUrl"];
var arrPlusBlue=["Blue","5","20.00","plusBlue5url","10","25.00","plusBlue10url","L","35.00","plusBlueLifeUrl"];
var arrPlusGreen=["Green","5","25.00","plusGreen5url","10","30.00","plusGreen10url","L","40.00","plusGreenLifeUrl"];
var arrPlusRed=["Red","5","30.00","plusRed5url","10","35.00","plusRed10url","L","45.00","plusRedLifeUrl"];
var arrSuperBlue=["Blue","5","50.00","superBlue5url","10","60.00","superBlue10url","L","70.00","superBlueLifeUrl"];
var arrSuperGreen=["Green","5","60.00","superGreen5url","10","70.00","superGreen10url","L","80.00","superGreenLifeUrl"];
var arrSuperRed=["Red","5","70.00","superRed5url","10","80.00","superRed10url","L","90.00","superRedLifeUrl"];

var arrBasic = ["Basic", arrBasicBlue, arrBasicGreen, arrBasicRed];
var arrPlus = ["Plus", arrPlusBlue, arrPlusGreen, arrPlusRed];
var arrSuper = ["Super", arrSuperBlue, arrSuperGreen, arrSuperRed];

var arrMaster = [arrBasic, arrPlus, arrSuper];

function calculate()
{
	var type = document.getElementById("widgetType").value;
	var color = document.getElementById("widgetColor").value;
	var warranty = document.getElementById("widgetWarranty").value;
	
	for(i=0;i<arrMaster.length;i++)
	{
		if(arrMaster[i][0] == type)
		{
			for(ii=1;ii<arrMaster[i].length;ii++)
			{
				if(arrMaster[i][ii][0] == color)
				{
					for(iii=1;i<arrMaster[i][ii].length;iii++)
					{
						if(arrMaster[i][ii][iii] == warranty)
						{
							iii++;
							var price = arrMaster[i][ii][iii];
							iii++;
							var url = arrMaster[i][ii][iii];
							break;
						}
					}
				}
			}
		}
	}
	document.getElementById("price").value = price;
	document.getElementById("buyLink").href = url;
}
	
</script>
</head>
<body onload="calculate();">

<select id="widgetType" onChange="calculate();">
	<option value="Basic">Basic Widget</option>
	<option value="Plus">Widget Plus</option>
	<option value="Super">Super Widget</option>
</select>

<select id="widgetColor" onChange="calculate();">
	<option value="Blue">Blue</option>
	<option value="Green">Green</option>
	<option value="Red">Red</option>
</select>

<select id="widgetWarranty" onChange="calculate();">
	<option value="5">5 year</option>
	<option value="10">10 year</option>
	<option value="L">Lifetime</option>
</select>

<input type="text" id="price" style="width:100px" /> 

<a href="#" onclick="alert(this.href);return false;" id="buyLink">Buy it now</a>

</body>
</html>

This calculates prices and generates a URL for three different types of widgets, each with three different possible colors (which are different prices), and three different possible warranties.

If you can modify this to your purposes, perfect... Problem solved. If you have questions or want me to explain the code, just ask

**Phaedrus** · 03-14-2005, 10:03 PM

There were two people interested in this, so I'm curious.... did that help?

**Green** · 03-19-2005, 12:34 PM

Thank you sooooooo much for taking the time to respond so thoroughly and quickly, it is much appreciated! I am trying the code now!

Thanks again

**Green** · 03-27-2005, 12:18 PM

Hi there,

The coding that you have generated works beautifully, however, when I try to add more variations to the three columns - eg more than three colour types, warranties and types, I can't make it work - would you be so kind as to tell me what I need to do to add more in??

Thanks again for your help
xx

**Phaedrus** · 03-27-2005, 02:27 PM

It would be easier for me to modify it myself, instead of explain it, so you could post your data and I'll assemble it. What I would need is: the price and URL for every possible combination.

**Green** · 03-28-2005, 06:31 AM

After a little more fiddling around I've managed it!!!

Thank you so much - I was about to give up on doing an html version of the site!!!

Happy Easter x