[Javascript] adding text to table cell.

[mtber]

I am trying to add an items price depending on the item that is selected in the Dopdown list. I want the price to be displayed inside the cell next to the drop down list without having to refresh the page. i have an <td> tag that has an ID attribute inside of it and i am trying to get document.getElementById("FramePrice") to see if that can write to the cell and there will be no need to refresh the page if the user selects a different item. If there is not way of doing this can somone give me ideas on another way that should at least print an items price to the cell depending on which items is selected. I have included my Javascript and my HTML. any help would be appreciated.

Here is the Javascript

function fillFrameCompany(){ 
//this function is used to fill the category list on load
addOption(document.drop_list.FCompany, "Specialized", "Specialized", "");
addOption(document.drop_list.FCompany, "Sinister", "Sinister", "");
addOption(document.drop_list.FCompany, "Giant", "Giant", "");
addOption(document.drop_list.FCompany, "Santa Cruz", "Santa Cruz", "");
addOption(document.drop_list.FCompany, "Cannondale", "Cannondale", "");
addOption(document.drop_list.FCompany, "Kona", "Kona", "");
addOption(document.drop_list.FCompany, "NS", "NS", "");
addOption(document.drop_list.FCompany, "Rockey Mountain", "Rockey Mountain", "");
addOption(document.drop_list.FCompany, "Trek", "Trek", "");
addOption(document.drop_list.FCompany, "Haro", "Haro", "");
}

function SelectFrame(){
//ON selection of category this function will work

removeAllOptions(document.drop_list.Frame);
addOption(document.drop_list.Frame, "Select Frame", "Select Frame", "Select Frame");

if(document.drop_list.FCompany.value == 'Specialized'){
addOption(document.drop_list.Frame,"Demo 8", "Demo 8");
addOption(document.drop_list.Frame,"Demo 8 Frame", "Demo 8 Frame");
addOption(document.drop_list.Frame,"Demo 7", "Demo 7");
}
if(document.drop_list.FCompany.value == 'Sinister'){
addOption(document.drop_list.Frame,"R9", "R9");
addOption(document.drop_list.Frame,"Mustang", "Mustang");
addOption(document.drop_list.Frame,"Ridge", "Ridge", "");
addOption(document.drop_list.Frame,"Gruitr", "Gruitr", "");
addOption(document.drop_list.Frame,"DNA", "DNA", "");

}
if(document.drop_list.FCompany.value == 'Giant'){
addOption(document.drop_list.Frame,"Anthem Advanced", "Anthem Advanced", "");
addOption(document.drop_list.Frame,"Anthem", "Anthem", "");
addOption(document.drop_list.Frame,"Glory DH", "Glory DH", "");
addOption(document.drop_list.Frame,"Trance Advanced", "Trance Advanced", "");
addOption(document.drop_list.Frame,"Trance", "Trance", "");
addOption(document.drop_list.Frame,"Trance X", "Trance X", "");
addOption(document.drop_list.Frame,"Reign X", "Reign X", "");
addOption(document.drop_list.Frame,"Reign", "Reign", "");
addOption(document.drop_list.Frame,"Glory", "Glory", "");
addOption(document.drop_list.Frame,"STP", "STP", "");
addOption(document.drop_list.Frame,"XTC Alliance", "XTC Alliance", "");
addOption(document.drop_list.Frame,"XTC", "XTC", "");
addOption(document.drop_list.Frame,"Youkon FX", "Youkon FX", "");
addOption(document.drop_list.Frame,"Youkon", "Youkon", "");
addOption(document.drop_list.Frame,"Rincon", "Rincon", "");
addOption(document.drop_list.Frame,"Boulder SE", "Boulder SE", "");
addOption(document.drop_list.Frame,"Boulder", "Boulder", "");
}
}

function FramePrice(){
var frames = new Array();
frames[0] = "Glory";
frames[1] = "Glory DH";
for
(i=0; i<frames.length;i++)
{
switch(frames[i])
case 0:
document.getElementById("FramePrice").write;
break;
case 1;
document.getElementById("FramePrice").write;
}
}

function fillHeadsetCompany(){
addOption(document.drop_list.HCompany, "Cane Creek", "Cane Creek", "");
}
function SelectHeadset(){
removeAllOptions(document.drop_list.Headset);
addOption(document.drop_list.Headset, "Headset", "Select Headset", "");
if(document.drop_list.HCompany.value == 'Cane Creek'){
addOption(document.drop_list.Headset,"1", "1");
addOption(document.drop_list.Headset,"2", "2");
addOption(document.drop_list.Headset,"3", "3");
}
}



////////////////// 

function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		//selectbox.options.remove(i);
		selectbox.remove(i);
	}
}


function addOption(selectbox, value, text )
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;

	selectbox.options.add(optn);
}

Here is my HTML

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>Build/Price a Bike</title>
<script language="javascript" src="list.js"></script>
</head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onLoad="fillFrameCompany();fillHeadsetCompany();fillFramePrice();">

<FORM name="drop_list" action="">

<table border="1" bgcolor="#00CCFF">
<tr>
<th>Category</th>
<th>Company</th>
<th>Part</th>
<th>Price</th>
</tr>

<tr>
<td>Frame</td>
<td><SELECT  NAME="FCompany" onChange="SelectFrame();">
<Option value="Select Frame Company">Select Frame Company</option>
</td>
<td><SELECT id="Frame" NAME="SubCat">
<Option value="Select Frame Company First">Select Frame Company First</option>
</td>
<td id='FramePrice'></td>
</tr>

<tr>
<td>Headset</td>
<td><SELECT NAME="HCompany" onChange="SelectHeadset();">
<Option value="Select Headset Company">Select Headset Company</option>
</td>
<td><SELECT id="Headset" NAME="SubCat">
<Option value="Select Headset Company First">Select Headset Company First</option>
</td>
</tr>


</form>
</body>
</html>

[Webworldx]

I am trying to add an items price depending on the item that is selected in the Dopdown list. I want the price to be displayed inside the cell next to the drop down list without having to refresh the page. i have an <td> tag that has an ID attribute inside of it and i am trying to get document.getElementById("FramePrice") to see if that can write to the cell and there will be no need to refresh the page if the user selects a different item. If there is not way of doing this can somone give me ideas on another way that should at least print an items price to the cell depending on which items is selected. I have included my Javascript and my HTML. any help would be appreciated.

There are lots of ways you could do this, but I've tried to preserve as much of your original code as possible so it's easier for you. Doing this, I've cheated slightly and held the price of the item in the option's TITLE tag.

Java Script:

function fillFrameCompany(){
//this function is used to fill the category list on load
addOption(document.drop_list.FCompany, "Specialized", "Specialized", "");
addOption(document.drop_list.FCompany, "Sinister", "Sinister", "");
addOption(document.drop_list.FCompany, "Giant", "Giant", "");
addOption(document.drop_list.FCompany, "Santa Cruz", "Santa Cruz", "");
addOption(document.drop_list.FCompany, "Cannondale", "Cannondale", "");
addOption(document.drop_list.FCompany, "Kona", "Kona", "");
addOption(document.drop_list.FCompany, "NS", "NS", "");
addOption(document.drop_list.FCompany, "Rockey Mountain", "Rockey Mountain", "");
addOption(document.drop_list.FCompany, "Trek", "Trek", "");
addOption(document.drop_list.FCompany, "Haro", "Haro", "");
}

function SelectFrame(){
//ON selection of category this function will work
removeAllOptions(document.drop_list.Frame);
addOption(document.drop_list.Frame, "Select Frame", "Select Frame", "Select Frame");

if(document.drop_list.FCompany.value == 'Specialized'){
addOption(document.drop_list.Frame,"Demo 8", "Demo 8","200");
addOption(document.drop_list.Frame,"Demo 8 Frame", "Demo 8 Frame");
addOption(document.drop_list.Frame,"Demo 7", "Demo 7");
}

if(document.drop_list.FCompany.value == 'Sinister'){
addOption(document.drop_list.Frame,"R9", "R9");
addOption(document.drop_list.Frame,"Mustang", "Mustang");
addOption(document.drop_list.Frame,"Ridge", "Ridge", "");
addOption(document.drop_list.Frame,"Gruitr", "Gruitr", "");
addOption(document.drop_list.Frame,"DNA", "DNA", "");
}

if(document.drop_list.FCompany.value == 'Giant'){
addOption(document.drop_list.Frame,"Anthem Advanced", "Anthem Advanced", "");
addOption(document.drop_list.Frame,"Anthem", "Anthem", "");
addOption(document.drop_list.Frame,"Glory DH", "Glory DH", "");
addOption(document.drop_list.Frame,"Trance Advanced", "Trance Advanced", "");
addOption(document.drop_list.Frame,"Trance", "Trance", "");
addOption(document.drop_list.Frame,"Trance X", "Trance X", "");
addOption(document.drop_list.Frame,"Reign X", "Reign X", "");
addOption(document.drop_list.Frame,"Reign", "Reign", "");
addOption(document.drop_list.Frame,"Glory", "Glory", "");
addOption(document.drop_list.Frame,"STP", "STP", "");
addOption(document.drop_list.Frame,"XTC Alliance", "XTC Alliance", "");
addOption(document.drop_list.Frame,"XTC", "XTC", "");
addOption(document.drop_list.Frame,"Youkon FX", "Youkon FX", "");
addOption(document.drop_list.Frame,"Youkon", "Youkon", "");
addOption(document.drop_list.Frame,"Rincon", "Rincon", "");
addOption(document.drop_list.Frame,"Boulder SE", "Boulder SE", "");
addOption(document.drop_list.Frame,"Boulder", "Boulder", "");
}}


function fillHeadsetCompany(){
addOption(document.drop_list.HCompany, "Cane Creek", "Cane Creek", "");
}
function SelectHeadset(){
removeAllOptions(document.drop_list.Headset);
addOption(document.drop_list.Headset, "Headset", "Select Headset", "");
if(document.drop_list.HCompany.value == 'Cane Creek'){
addOption(document.drop_list.Headset,"1", "1");
addOption(document.drop_list.Headset,"2", "2");
addOption(document.drop_list.Headset,"3", "3");
}}

function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		//selectbox.options.remove(i);
		selectbox.remove(i);
	}
}

function addOption(selectbox, value, text , price)
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;
	optn.title = price;

	selectbox.options.add(optn);
}


function getPrice(prc){
  document.getElementById('FramePrice').innerHTML = "$" + prc
}

HTML:

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>Build/Price a Bike</title>
<script type='text/javascript' src="list.js"></script>
</head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onLoad="fillFrameCompany();fillHeadsetCompany();">
<FORM name="drop_list" action="">

<table border="1" bgcolor="#00CCFF">
<tr>
<th>Category</th>
<th>Company</th>
<th>Part</th>
<th>Price</th>
</tr>

<tr>
<td>Frame</td>
<td><SELECT  NAME="FCompany" onChange="SelectFrame();">
<Option value="Select Frame Company">Select Frame Company</option>
</td>
<td><SELECT id="Frame" NAME="SubCat" onChange="getPrice(this.options[this.options.selectedIndex].title)">
<Option value="Select Frame Company First">Select Frame Company First</option>
</td>
<td id='FramePrice'></td>
</tr>

<tr>
<td>Headset</td>
<td><SELECT NAME="HCompany" onChange="SelectHeadset();">
<Option value="Select Headset Company">Select Headset Company</option>
</td>
<td><SELECT id="Headset" NAME="SubCat">
<Option value="Select Headset Company First">Select Headset Company First</option>
</td>
</tr>


</form>
</body>
</html>

Try selecting Specialised >> Demo 8 to see what happens. The rest come up undefined at the moment, but I'll let you add your own prices in!

[simsie]

document.getElementById('theid').innerHTML = "The Text you wish to add really";

Notice my use of ' instead of " in the ( )'s. I am not sure whether it matters or not though, I've always done it that way and it's worked.

[kjordan2001]

document.getElementById('theid').innerHTML = "The Text you wish to add really";

Notice my use of ' instead of " in the ( )'s. I am not sure whether it matters or not though, I've always done it that way and it's worked.

Nah, javascript doesn't care which one a string is enclosed in and neither have special behavior if you're used to a language like php where double quotes will evaluate any variables inside it.

[mtber]

Thanks for the input but i have made a few changes to the code before i checked the forum. I have changed my tactic to see if i can get an input field to be populated on the click of a button or if that field could be populated when the user selects an item out of the final drop down lists so that i could eliminate the button completely. the function frameprice is what i am trying to use to get either the button to display the price of if it will work when the user selects an item out of the drop down. either way is fine. if anyone has any ideas of other ways i could do this let me know. Thanks

This is my HTML code

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>Build/Price a Bike</title>
<script language="javascript" src="list.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="Bikestyle.css" />
<body text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onLoad="fillFrameCompany();fillHeadsetCompany();">
<h2 valign="Top" align="center"><font color="#462E12"><u>Build a Bike!</u></font></h2>
<FORM name="drop_list" action="">
  <table border="1" bgcolor="#BF7E33" align="center" valign="center" bordercolor="black">
	<tr>
	  <th>Category</th>
	  <th>Company</th>
	 <th>Purpose</th>
	  <th>Part</th>
	 <th>Get Price</th>
	  <th>Price</th>
	</tr>
	<tr>
	<td>Frame</td>
	<td>
	<select name="FCompany" onChange="SelectPurpose();" style="WIDTH: 200px">
	<option value="Select Frame Company">Select Frame Company</option>
	</select>
	</td>
	<td>
	<select name="FPurpose" onChange="SelectFrame();" style="WIDTH: 150px">
	<option value="Select Frame Company">Select Purpose</option>
	</td>
	<td>
	<select id="Frame" name="SubCat" onChange="Frameprice();" style="WIDTH: 240px">
	<option value="Select Frame Company">Select Frame Company</option>
	</select>
	</td>
	<td>
	<input name="getframeprice" type="button" value="Get Price" style="WIDTH: 100px" onClick="Frameprice(frame);">
	</input>
	</td>
	<td>
	<div id="FramePrice" name="FramePrice" style="display" style="WIDTH: 100px">
	<input name="FramePrice" readonly>
	</input>
	</div>
	</td>
	</tr>
	<tr>
	<td>Headset</td>
	<td>
	<select name="HCompany" onChange="SelectHeadset();" style="WIDTH: 200px">
	<option value="Select Headset Company">Select Headset Company</option>
	</select>
	</td>
	<td></td>
	<td>
	<select id="Headset" name="SubCat" style="WIDTH: 240px">
	<option value="Select Headset Company First">Select Headset Company First</option>
	</select>
	</td>
	<td>
	<input name="getheadsetprice" type="button" value="Get Price" style="WIDTH: 100px">
	</input>
	</td>
	<td>
	<div name="HeadsetPrice" style="display">
	<input name="FramePrice" readonly>
	</input>
	</div>
	</tr>
	<tr>
	<td>Fork</td>
	<td>
	<select name="FOCompany" onChange="SelectFork();" style="WIDTH: 200px">
	<option value="Select Fork Company">Select Fork Company</option>
	</select>
	</td>
	<td></td>
	<td>
	<select id="Fork" name="SubCat" style="WIDTH: 240px">
	<option value="Select Fork Company First">Select Fork Company First</option>
	</select>
	</td>
	<td>
	<input name="getforkpricce" type="button" value="Get Price" style="WIDTH: 100px">
	</input>
	</td>
	<td>
	<div name="ForkPrice" style="display;">
	<input name="FramePrice" readonly>
	</input>
	</div>
	</td>
	</tr>
	<tr>
	<td>Shock</td>
	<td>
	<select name="SCompany" onChange="SelectShock();" style="WIDTH: 200px">
	<option value="Select Shock Company">Select Shock Company</option>
	</select>
	</td>
	<td></td>
	<td>
	<select id="Shock" name="SubCat" style="WIDTH: 240px">
	<option value="Select Shock Company First">Select Shock Company First</option>
	</select>
	</td>
	<td>
	<input name="getshockprice" type="button" value="Get Price" style="WIDTH: 100px">
	</input>
	</td>
	<td>
	<div name="ShockPrice" style="display;">
	<input name="FramePrice" readonly>
	</input>
	</div>
	</td>
	</tr>
	<tr>
	<td>Tires</td>
	<td>
	<select name="TCompany" onChange="SelectTire();" style="WIDTH: 200px">
	<option value="Select Tire Company">Select Tire Company</option>
	</select>
	</td>
	<td></td>
	<td>
	<select id="Tire" name="SubCat" style="WIDTH: 240px">
	<option value="Select Tire Company First">Select Tire Company First</option>
	</select>
	</td>
	<td>
	<input name="gettiresprice" type="button" value="Get Price" style="WIDTH: 100px">
	</input>
	</td>
	<td>
	<div name="TirePrice" style="display;">
	<input name="FramePrice" readonly>
	</input>
	</div>
	</td>
	</tr>
	<tr>
	<td>Wheelset</td>
	<td>
	<select name="WCompany" onChange="SelectWheelset();" style="WIDTH: 200px">
	<option value="Select Wheelset Company">Select Wheelset Company</option>
	</select>
	</td>
	<td></td>
	<td>
	<select id="Wheelset" name="SubCat" style="WIDTH: 240px">
	<option value="Select Wheelset Company First">Select Wheelset Company First</option>
	</select>
	</td>
	<td>
	<input name="getwheelsetprice" type="button" value="Get Price" style="WIDTH: 100px">
	</input>
	</td>
	<td>
	<div name="WheelsetPrice" style="display;">
	<input name="FramePrice" readonly>
	</input>
	</div>
	</td>
	</tr>
	<tr>
	<td>Crankset</td>
	<td>
	<select name="CSCompany" onChange="SelectCrankset();" style="WIDTH: 200px">
	<option value="Select Crankset Company">Select Crankset Company</option>
	</select>
	</td>
	<td></td>
	<td>
	<select id="Crankset" name="SubCat" style="WIDTH: 240px">
	<option value="Select Crankset Company First">Select Crankset Company First</option>
	</select>
	</td>
	<td>
	<input name="getcranksetprice" type="button" value="Get Price" style="WIDTH: 100px">
	</input>
	</td>
	<td>
	<div name="CranksetPrice" style="display;">
	<input name="FramePrice" readonly>
	</input>
	</div>
	</td>
	</tr>
	<tr>
	<td>Stem</td>
	<td>
	<select name="STCompany" onChange="SelectStem();" style="WIDTH: 200px">
	<option value="Select Stem Company">Select Stem Company</option>
	</select>
	</td>
	<td></td>
	<td>
	<select id="Stem" name="SubCat" style="WIDTH: 240px">
	<option value="Select Stem Company First">Select Stem Company First</option>
	</select>
	</td>
	<td>
	<input name="getstemprice" type="button" value="Get Price" style="WIDTH: 100px">
	</input>
	</td>
	<td>
	<div name="StemPrice" style="display;">
	<input name="FramePrice" readonly>
	</input>
	</div>
	</td>
	</tr>
	<tr>
	<td>Bars</td>
	<td>
	<select name="BCompany" onChange="SelectBar();" style="WIDTH: 200px">
	<option value="Select Bars Company">Select Bars Company</option>
	</select>
	</td>
	<td></td>
	<td>
	<select id="Bars" name="SubCat" style="WIDTH: 240px">
	<option value="Select Bars Company First">Select Bars Company First</option>
	</select>
	</td>
	<td>
	<input name="getbarsprice" type="button" value="Get Price" style="WIDTH: 100px">
	</input>
	</td>
	<td>
	<div name="BarPrice" style="display;">
	<input name="FramePrice" readonly>
	</input>
	</div>
	</td>
	</tr>
	<tr>
	<td>Pedels</td>
	<td>
	<select name="PCompany" onChange="SelectPedels();" style="WIDTH: 200px">
	<option value="Select Pedels Company">Select Pedels Company</option>
	</select>
	</td>
	<td></td>
	<td>
	<select id="Pedels" name="SubCat" style="WIDTH: 240px">
	<option value="Select Pedels Company First">Select Pedels Company First</option>
	</select>
	</td>
	<td>
	<input name="getpedelsprice" type="button" value="Get Price" style="WIDTH: 100px">
	</input>
	</td>
	<td>
	<div name="PedelPrice" style="display;">
	<input name="FramePrice" readonly>
	</input>
	</div>
	</td>
	</tr>
	<tr>
	<td>Brakes</td>
	<td>
	<select name="BRCompany" onChange="SelectBrakes();" style="WIDTH: 200px">
	<option value="Select Brakes Company">Select Brakes Company</option>
	</select>
	</td>
	<td></td>
	<td>
	<select id="Brakes" name="SubCat" style="WIDTH: 240px">
	<option value="Select Brakes Company First">Select Brakes Company First</option>
	</select>
	</td>
	<td>
	<input name="getbrakesprice" type="button" value="Get Price" style="WIDTH: 100px">
	</input>
	</td>
	<td>
	<div name="BrakesPrice" style="display;">
	<input name="FramePrice" readonly>
	</input>
	</div>
	</td>
	</tr>
	<tr>
	<td>Seat</td>
	<td>
	<select name="SECompany" onChange="SelectSeat();" style="WIDTH: 200px">
	<option value="Select Seat Company">Select Seat Company</option>
	</select>
	</td>
	<td></td>
	<td>
	<select id="Seat" name="SubCat" style="WIDTH: 240px">
	<option value="Select Seat Company First">Select Sheat Company First</option>
	</select>
	</td>
	<td>
	<input name="getseatprice" type="button" value="Get Price" style="WIDTH: 100px">
	</input>
	</td>
	<td>
	<div name="SeatPrice" style="display;">
	<input name="FramePrice" readonly>
	</input>
	</div>
	</td>
	</tr>
	<tr>
	<td>Seat Post</td>
	<td>
	<select name="SPCompany" onChange="SelectSeatPost();" style="WIDTH: 200px">
	<option value="Select Seat Post Company">Select Seat Post Company</option>
	</select>
	</td>
	<td></td>
	<td>
	<select id="SeatPost" name="SubCat" style="WIDTH: 240px">
	<option value="Select Seat Post Company First">Select Seat Post Company First</option>
	</select>
	</td>
	<td>
	<input name="getseatpostprice" type="button" value="Get Price" style="WIDTH: 100px">
	</input>
	</td>
	<td>
	<div name="SeatPostPrice" style="display;">
	<input name="FramePrice" readonly>
	</input>
	</div>
	</td>
	</tr>
	<tr>
	<td>Chain</td>
	<td>
	<select name="CCompany" onChange="SelectChain();" style="WIDTH: 200px">
	<option value="Select Chain Company">Select Chain Company</option>
	</select>
	</td>
	<td></td>
	<td>
	<select id="Chain" name="SubCat" style="WIDTH: 240px">
	<option value="Select Chain Company First">Select Chain Company First</option>
	</select>
	</td>
	<td>
	<input name="getchainprice" type="button" value="Get Price" style="WIDTH: 100px">
	</input>
	</td>
	<td>
	<div name="ChainPrice" style="display;">
	<input name="FramePrice" readonly>
	</input>
	</div>
	</td>
	</tr>
	<tr>
	<td>Chain Rings</td>
	<td>
	<select name="CRCompany" onChange="SelectChainRings();" style="WIDTH: 200px">
	<option value="Select Chain Rings Company">Select Chain Rings Company</option>
	</select>
	</td>
	<td></td>
	<td>
	<select id="Chain Rings" name="SubCat" style="WIDTH: 240px">
	<option value="Select Chain Rings Company First">Select Chain Rings Company First</option>
	</select>
	</td>
	<td>
	<input name="getchainringsprice" type="button" value="Get Price" style="WIDTH: 100px">
	</input>
	</td>
	<td>
	<div name="ChaingRingsPrice" style="display;">
	<input name="FramePrice" readonly>
	</input>
	</div>
	</td>
	</tr>
	<tr>
	<td>Chain Guide</td>
	<td>
	<select name="CGCompany" onChange="SelectChainGuide();" style="WIDTH: 200px">
	<option value="Select Chain Guide Company">Select Chain Guide Company</option>
	</select>
	</td>
	<td></td>
	<td>
	<select id="Chain Guide" name="SubCat" style="WIDTH: 240px">
	<option value="Select Chain Guide Company First">Select Chain Guide Company First</option>
	</select>
	</td>
	<td>
	<input name="getchainguideprice" type="button" value="Get Price" style="WIDTH: 100px">
	</input>
	</td>
	<td>
	<div name="ChainGuidePrice" style="display;">
	<input name="FramePrice" readonly>
	</input>
	</div>
	</td>
	</tr>
	</table>
	<table border="1" bgcolor="Tan" align="center" cellpadding="2" valign="bottom" bordercolor="black">
	<br>
	</br>
	<th><input type="button" name="gettotal" value="Calculate Total" onClick="calctotal();" valign="center" align="center">
	</input></th>
	<td>
	<div name="Total" style="display;">
	<input name="FramePrice" readonly>
	</input>
	</div>
	</td>
	</table>
	</FORM>
	<p valign="bottom" align="center"><font><b><i>© Copyright 2008 Kyle Beaulieu</i></b></font></p>
   </body>
   </html>

This is my Javascript

function fillFrameCompany(){ 
//this function is used to fill the category list on load
addOption(document.drop_list.FCompany, "Giant", "Giant", "");
addOption(document.drop_list.FCompany, "Cannondale", "Cannondale", "");
addOption(document.drop_list.FCompany, "Brodie", "Brodie", "");
addOption(document.drop_list.FCompany, "Canfield Brothers", "Canfield Brothers", "");
addOption(document.drop_list.FCompany, "Bianchi", "Bianchi", "");
addOption(document.drop_list.FCompany, "Specialized", "Specialized", "");
addOption(document.drop_list.FCompany, "Sinister", "Sinister", "");
addOption(document.drop_list.FCompany, "Santa Cruz", "Santa Cruz", "");
addOption(document.drop_list.FCompany, "Brooklyn Machine Works", "Brooklyn Machine Works", "");
addOption(document.drop_list.FCompany, "Kona", "Kona", "");
addOption(document.drop_list.FCompany, "NS", "NS", "");
addOption(document.drop_list.FCompany, "Da Vinci", "Da Vinci", "");
addOption(document.drop_list.FCompany, "Rockey Mountain", "Rockey Mountain", "");
addOption(document.drop_list.FCompany, "Trek", "Trek", "");
addOption(document.drop_list.FCompany, "Haro", "Haro", "");
addOption(document.drop_list.FCompany, "Duncon", "Duncon", "");
addOption(document.drop_list.FCompany, "Ellsworth", "Ellsworth", "");
addOption(document.drop_list.FCompany, "Evil", "Evil", "");
addOption(document.drop_list.FCompany, "Foes", "Foes", "");
addOption(document.drop_list.FCompany, "GT", "GT", "");
addOption(document.drop_list.FCompany, "Hoffman", "Hoffman", "");
addOption(document.drop_list.FCompany, "Intense", "Intense", "");
addOption(document.drop_list.FCompany, "Iron Horse", "Iron Horse", "");
addOption(document.drop_list.FCompany, "Jamis", "Jamis", "");
addOption(document.drop_list.FCompany, "Karpiel", "Karpiel", "");
addOption(document.drop_list.FCompany, "Marin", "Marin", "");
addOption(document.drop_list.FCompany, "Norco", "Norco", "");
addOption(document.drop_list.FCompany, "Scott", "Scott", "");
addOption(document.drop_list.FCompany, "Tomac", "Tomac", "");
addOption(document.drop_list.FCompany, "Yeti", "Yeti", "");
}

function SelectPurpose(){
removeAllOptions(document.drop_list.Frame);
addOption(document.drop_list.Frame, "Select Purpose", "Select Purpose", "");

if(document.drop_list.FCompany.value == 'Giant'){
addOption(document.drop_list.FPurpose,"MTN", "MTN");
addOption(document.drop_list.FPurpose,"Road", "Road");
}
if(document.drop_list.FCompany.value == 'Cannondale'){
addOption(document.drop_list.FPurpose,"MTN", "MTN");
addOption(document.drop_list.FPurpose,"Road", "Road");
}
// if(document.drop_list.FCompany.value == 'Canfield Brothers'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'Bianchi'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'Santa Cruz'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'Brooklyn Machine Works'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'Kona'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'NS'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'Da Vinci'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'Rockey Mountain'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'Trek'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'Haro'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'Duncon'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'Ellsworth'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'Evil'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'Foes'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'GT'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'Hoffman'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'Intense'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'Iron Horse'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'Jamis'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'Karpiel'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'Marin'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'Norco'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'Scott'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'Tomac'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
// if(document.drop_list.FCompany.value == 'Yeti'){
// addOption(document.drop_list.FPurpose,"MTN", "MTN");
// addOption(document.drop_list.FPurpose,"Road", "Road");
// }
}
function SelectFrame(){
//ON selection of category this function will work
removeAllOptions(document.drop_list.Frame);
addOption(document.drop_list.Frame, "Select Frame", "Select Frame", "Select Frame");

//Giant Bikes
//Giant MTN
if(document.drop_list.FCompany.value == 'Giant' && document.drop_list.FPurpose.value == 'MTN'){
addOption(document.drop_list.Frame,"Anthem Advanced", "Anthem Advanced", "");
addOption(document.drop_list.Frame,"Anthem", "Anthem", "");
addOption(document.drop_list.Frame,"Glory DH", "Glory DH", "");
addOption(document.drop_list.Frame,"Trance Advanced", "Trance Advanced", "");
addOption(document.drop_list.Frame,"Trance", "Trance", "");
addOption(document.drop_list.Frame,"Trance X", "Trance X", "");
addOption(document.drop_list.Frame,"Reign X", "Reign X", "");
addOption(document.drop_list.Frame,"Reign", "Reign", "");
addOption(document.drop_list.Frame,"Glory", "Glory", "");
addOption(document.drop_list.Frame,"STP", "STP", "");
addOption(document.drop_list.Frame,"XTC Alliance", "XTC Alliance", "");
addOption(document.drop_list.Frame,"XTC", "XTC", "");
addOption(document.drop_list.Frame,"Youkon FX", "Youkon FX", "");
addOption(document.drop_list.Frame,"Youkon", "Youkon", "");
addOption(document.drop_list.Frame,"Rincon", "Rincon", "");
addOption(document.drop_list.Frame,"Boulder SE", "Boulder SE", "");
addOption(document.drop_list.Frame,"Boulder", "Boulder", "");
}//Giant Road
if(document.drop_list.FCompany.value == 'Giant' && document.drop_list.FPurpose.value == 'Road'){
addOption(document.drop_list.Frame,"TCR Advanced", "TCR Advanced", "");
addOption(document.drop_list.Frame,"TCR Composite", "TCR Composite", "");
addOption(document.drop_list.Frame,"TCR Alliance", "TCR Alliance", "");
addOption(document.drop_list.Frame,"Trinity Alliance", "Trinity Alliance", "");
addOption(document.drop_list.Frame,"TCR", "TCR", "");
addOption(document.drop_list.Frame,"OCR Composite", "OCR Composite", "");
addOption(document.drop_list.Frame,"OCR Alliance", "OCR Alliance", "");
addOption(document.drop_list.Frame,"OCR", "OCR", "");
addOption(document.drop_list.Frame,"FCR", "FCR", "");
addOption(document.drop_list.Frame,"TCX", "TCX", "");
addOption(document.drop_list.Frame,"TCR Advanced Team Frame", "TCR Advanced Team Frame", "");
addOption(document.drop_list.Frame,"TCR Composite Frame", "TCR Composite Frame", "");
addOption(document.drop_list.Frame,"TCR Advanced Frame", "TCR Advanced Frame", "");
addOption(document.drop_list.Frame,"TCX Frame", "TCX Frame", "");
addOption(document.drop_list.Frame,"Omnium Frame", "Omnium Frame", "");
addOption(document.drop_list.Frame,"Tinitiy Alliance Frame", "Trinity Alliance Frame", "");
}
}


function Frameprice(){
var frame = document.drop_list.Frame.value
if(frame <= "STP")
{
document.write.drop_list.FramePrice("$1000");
}
}

function fillHeadsetCompany(){
addOption(document.drop_list.HCompany, "Cane Creek", "Cane Creek", "")
addOption(document.drop_list.HCompany, "RaceFace", "RaceFace", "")
addOption(document.drop_list.HCompany, "Chris King", "Chris King", "")
}
function SelectHeadset(){
removeAllOptions(document.drop_list.Headset);
addOption(document.drop_list.Headset, "Headset", "Select Headset", "");
if(document.drop_list.HCompany.value == 'Cane Creek'){
addOption(document.drop_list.Headset,"1", "1");
addOption(document.drop_list.Headset,"2", "2");
addOption(document.drop_list.Headset,"3", "3");
}
}


function calctotal(){

}
////////////////// 

function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		// selectbox.options.remove(i);
		selectbox.remove(i);
	}
}


function addOption(selectbox, value, text )
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;

	selectbox.options.add(optn);
}

[Webworldx]

Hi mtber,

Your code's changed quite a bit, and it took a while to sort out the previous one! What i'd say is if you are going to go down this current route and expanding your page into something more complicated, it'll probably be worth restructuring your code into a multi-dimensional array of items, then populating them from that. It's a bit more work at the start, but it means you can set/get the prices a bit more easily, and your code will look cleaner.

Something like:

var theFrame = [];
//theFr....[x] = [ "Company" , [ "MTN Bikes" , "Price"] , [ "Road Bikes" , "Price"]  ]
theFrame[0] =  [ "Giant" , [ 
  ["Anthem Advanced" , "200" ] ,
   ["Anthem" , "150" ] ,
   ["Glory DH" , "180" ] 
  ]
   , 
  [
   [ "TCR Advanced" , "180" ]
   [ "TCR Composite" , "190" ]
  ]
]
theFrame[1] = [ "Cannondale" , ......

etc... until you've built the whole of what is... quite a large database(!) Then you can traverse it as necessary, with all the prices in. You might also wish to consider storing it all as an XML file, which looks a bit easier on the eye than the Javascript array.

It is possible to modify your existing code in the same way I did before, and cheat by adding the price into a spare HTML tag and getting it that way, but your code does look as if it's going to get more and more complicated when you start moving down the list of options to brakes, seat and chain.

Hope that helps you a bit(!)

[mtber]

would it be possiable to have a function that will have either if statments in it or possiable switch stament that depending on the frame value the frame the user selects from the drop down it will run through the function this will tell what to be put into the input box. Is there a way to have the if or switch statement when it finds the right value to write the price of that item to the text area in the table. I have cleaned up the code a little made it a little smaller so it is easier to work with once i figure out how to get the last part to be displayed it will be much easier to finish the project. any help would be appreciated i have been looking everywhere for an answer to my problem but have found nothing.

HTML

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>Build/Price a Bike</title>
<script language="javascript" src="list.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="Bikestyle.css" />
<body text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onLoad="fillFrameCompany()">
<h2 valign="Top" align="center"><font color="#462E12"><u>Build a Bike!</u></font></h2>
<FORM name="drop_list" action="">
  <table border="1" bgcolor="#BF7E33" align="center" valign="center" bordercolor="black">
	<tr>
	  <th>Category</th>
	  <th>Company</th>
	 <th>Purpose</th>
	  <th>Part</th>
	 <th>Price</th>
	</tr>
	<tr>
	<td>Frame</td>
	<td>
	<select name="FCompany" onChange="SelectPurpose();" style="WIDTH: 200px">
	<option value="Select Frame Company">Select Frame Company</option>
	</select>
	</td>
	<td>
	<select name="FPurpose" onChange="SelectFrame();" style="WIDTH: 150px">
	<option value="Select Frame Company">Select Purpose</option>
	</td>
	<td>
	<select id="Frame" name="SubCat" onChange="Frameprice()" style="WIDTH: 240px">
	<option value="Select Frame Company">Select Frame Company</option>
	</select>
	</td>
	<td>
	<div id="FramePrice" style="display" style="WIDTH: 100px">
	<input name="FramePrice" readonly>
	</input>
	</div>
	</td>
	</tr>
	</table>
	<table border="1" bgcolor="Tan" align="center" cellpadding="2" valign="bottom" bordercolor="black">
	<br>
	</br>
	<th>Total</th>
	<td>
	<div name="Total" style="display;">
	<input name="FramePrice" readonly>
	</input>
	</div>
	</td>
	</table>
	</FORM>
	<p valign="bottom" align="center"><font><b><i>© Copyright 2008 Kyle Beaulieu</i></b></font></p>
   </body>
   </html>

Javascript

function fillFrameCompany(){ 
//this function is used to fill the category list on load
addOption(document.drop_list.FCompany, "Giant", "Giant", "");
}

function SelectPurpose(){
removeAllOptions(document.drop_list.Frame);
addOption(document.drop_list.Frame, "Select Purpose", "Select Purpose", "");

if(document.drop_list.FCompany.value == 'Giant'){
addOption(document.drop_list.FPurpose,"MTN", "MTN");
addOption(document.drop_list.FPurpose,"Road", "Road");
}
}

function SelectFrame(){
//ON selection of category this function will work
removeAllOptions(document.drop_list.Frame);
addOption(document.drop_list.Frame, "Select Frame", "Select Frame", "Select Frame");

//Giant Bikes
//Giant MTN
if(document.drop_list.FCompany.value == 'Giant' && document.drop_list.FPurpose.value == 'MTN'){
addOption(document.drop_list.Frame,"Anthem Advanced", "Anthem Advanced", "");

}//Giant Road
if(document.drop_list.FCompany.value == 'Giant' && document.drop_list.FPurpose.value == 'Road'){
addOption(document.drop_list.Frame,"TCR Advanced", "TCR Advanced", "");

}
}


function Frameprice(){
var frame = (document.drop_list.Frame.value)
var price = 0
var display = (document.drop_list.FramePrice)
if(frame == 'Anthem Andvanced'){
price = '$1000'
display = price
}
}

////////////////// 

function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		// selectbox.options.remove(i);
		selectbox.remove(i);
	}
}


function addOption(selectbox, value, text )
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;

	selectbox.options.add(optn);
}

[Webworldx]

What you're asking for is possible:

if( document.getElementById('Frame').value == 'Frame Name 1'){
   document.getElementById('FramePrice').innerHTML = 'Frame Price 1';
} else if( document.getElementById('Frame').value == 'Frame Name 2'){
   document.getElementById('FramePrice').innerHTML = 'Frame Price 2';
} else if( ..........

}

but it may be easier to code with and modify if you do the array style I suggested above, and just have a big for loop. It's your choice at the end, I imagine they'll end up at similar lengths of code in size at the end(!)

would it be possiable to have a function that will have either if statments in it or possiable switch stament that depending on the frame value the frame the user selects from the drop down it will run through the function this will tell what to be put into the input box. Is there a way to have the if or switch statement when it finds the right value to write the price of that item to the text area in the table. I have cleaned up the code a little made it a little smaller so it is easier to work with once i figure out how to get the last part to be displayed it will be much easier to finish the project. any help would be appreciated i have been looking everywhere for an answer to my problem but have found nothing.

[mtber]

Ok i got this to work but i have noticed a different problem it seems that when the user selects a purpose but then if the change their mind and decide to change the company name it will keep the purpose in the drop down so instead of showing 2 options it will give you 4 and the only ones that work are the bottom 2 if you keep doing that then it will keep adding options when there really is only suppose to be 2 MTN and Road. If anyone has any ideas how to fix this that would be great. My problem is in my Function SelectPurpose in my javascript.

[Webworldx]

function SelectPurpose(){
removeAllOptions(document.drop_list.Frame);

You just need to add a:

removeAllOptions(document.drop_list.FPurpose);

to that?

[mtber]

function SelectPurpose(){
removeAllOptions(document.drop_list.Frame);

You just need to add a:

removeAllOptions(document.drop_list.FPurpose);

to that?

I have tried to add this at the end of each if statment like below.

if(document.bike.FCompany.value == 'Azonic'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
removeAllOption(document.bike.FPurpose);
}

It still will repeat when the user tries to change option.

[Webworldx]

It's removeAllOptions not removeAllOption, but you'll want it at the start of the function rather than in each if statement, as when it works, it'll just put the MTN and Road in the box, then wipe it straight after(!)

[mtber]

Even when i add that if the user were to go back to their original selection it will double the MTN and Road that are in the purpose drop down list. Here is my code. The SelectPurpose function is what controls the display of MTN and Road. If you want to see my HTML code let me know Thanks for the help.

// JavaScript Document

function fillFrameCompany(){
//this function is used to fill the category list on load
addOption(document.bike.FCompany, "Azonic", "Azonic", "");
addOption(document.bike.FCompany, "Banshee", "Banshee", "");
addOption(document.bike.FCompany, "Bianchi", "Bianchi", "");
addOption(document.bike.FCompany, "Brodie", "Brodie", "");
addOption(document.bike.FCompany, "Brooklyn Machine Works", "Brooklyn Machine Works", "");
addOption(document.bike.FCompany, "Canfield Brothers", "Canfield Brothers", "");
addOption(document.bike.FCompany, "Cannondale", "Cannondale", "");
addOption(document.bike.FCompany, "Cove", "Cove", "");
addOption(document.bike.FCompany, "Ellsworth", "Ellsworth", "");
addOption(document.bike.FCompany, "Foes", "Foes", "");
addOption(document.bike.FCompany, "Giant", "Giant", "");
addOption(document.bike.FCompany, "GT", "GT", "");
addOption(document.bike.FCompany, "Haro", "Haro", "");
addOption(document.bike.FCompany, "Intense", "Intense", "");
addOption(document.bike.FCompany, "Iron Horse", "Iron Horse", "");
addOption(document.bike.FCompany, "Karpiel", "Karpiel", "");
addOption(document.bike.FCompany, "Kona", "Kona", "");
addOption(document.bike.FCompany, "K2", "K2", "");
addOption(document.bike.FCompany, "Marin", "Marin", "");
addOption(document.bike.FCompany, "Norco", "Norco", "");
addOption(document.bike.FCompany, "Rocky Mountain", "Rocky Mountain", "");
addOption(document.bike.FCompany, "Santa Cruz", "Santa Cruz", "");
addOption(document.bike.FCompany, "Sinister", "Sinister", "");
addOption(document.bike.FCompany, "Specialized", "Specialized", "");
addOption(document.bike.FCompany, "Tomac", "Tomac", "");
addOption(document.bike.FCompany, "Trek", "Trek", "");
addOption(document.bike.FCompany, "Yeti", "Yeti", "");
}


function SelectPurpose(){
removeAllOptions(document.bike.Frame);
addOption(document.bike.Frame, "Select Purpose", "Select Purpose", "");

if(document.bike.FCompany.value == 'Azonic'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Banshee'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Bianchi'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Brodie'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Brooklyn Machine Works'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Canfield Brothers'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Cannondale'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Cove'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Ellsworth'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Foes'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Giant'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'GT'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Haro'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Intense'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Iron Horse'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Karpiel'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Kona'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'K2'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Marin'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Norco'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Rocky Mountain'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Santa Cruz'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Sinister'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Specialized'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Tomac'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Trek'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
if(document.bike.FCompany.value == 'Yeti'){
addOption(document.bike.FP,"MTN", "MTN");
addOption(document.bike.FP,"Road", "Road");
}
}

function SelectFrame(){
//ON selection of category this function will work
removeAllOptions(document.bike.Frame);
addOption(document.bike.Frame, "Select Frame", "Select Frame", " ");

//Azonic Bikes
//Azonic MTN
if(document.bike.FCompany.value == 'Azonic' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"AZ-7", "AZ-7", "--");}

if(document.bike.FCompany.value == 'Azonic' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"B52", "B52", "1200");}

if(document.bike.FCompany.value == 'Azonic' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Revenge", "Revence", "--");}

if(document.bike.FCompany.value == 'Azonic' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Steelhead", "Steelhead", "--");}

//Azonic Road
if(document.bike.FCompany.value == 'Azonic' && document.bike.FP.value == 'Road'){
addOption(document.bike.Frame,"--", "--", "--");
}
//Banshee MTN
if(document.bike.FCompany.value == 'Banshee' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Rune w/DHX 5.0 Air", "Rune w/DHX 5.0 Air", "1813");}

if(document.bike.FCompany.value == 'Banshee' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Rune w/DHX 5.0 Coil", "Rune w/DHX 5.0 Coil", "1760");}

if(document.bike.FCompany.value == 'Banshee' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Rune w/DHX 3.0 Coil", "Rune w/DHX 3.0 Coil", "1593");}

if(document.bike.FCompany.value == 'Banshee' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Rune w/Evolver X4 Air", "Rune w/Evolver X4 Air", "1618");}

if(document.bike.FCompany.value == 'Banshee' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Rune w/Swinger X4 Coil", "Rune w/Swinger X4 Coil", "1535");}

if(document.bike.FCompany.value == 'Banshee' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Wildcard w/DHX 5.0 Air", "Wildcard w/DHX 5.0 Air", "1855");}

if(document.bike.FCompany.value == 'Banshee' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Wildcard w/DHX 5.0 Coil", "Wildcard w/DHX 5.0 Coil", "1800");}

if(document.bike.FCompany.value == 'Banshee' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Wildcard w/DHX 3.0 Coil", "Wildcard w/DHX 3.0 Coil", "1619");}

if(document.bike.FCompany.value == 'Banshee' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Wildcard w/Evolver X4 Air", "Wildcard w/Evolver X4 Air", "1694");}

if(document.bike.FCompany.value == 'Banshee' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Wildcard w/Swinger X4 Coil", "Wildcard w/Swinger X4 Coil", "1575");}


if(document.bike.FCompany.value == 'Banshee' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Pyre w/Float RP23", "Pyre w/Float RP23", "1645");}

if(document.bike.FCompany.value == 'Banshee' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Pyre w/Swinger X3", "Pyre Swinger X3", "1510");}

if(document.bike.FCompany.value == 'Banshee' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Viento", "Viento", "590");}

if(document.bike.FCompany.value == 'Banshee' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Viento 29er", "Viento 29er", "590");}

if(document.bike.FCompany.value == 'Banshee' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Scythe w/DHX 5.0 Coil", "Scythe w/DHX 5.0 Coil", "1800");}

if(document.bike.FCompany.value == 'Banshee' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Scythe w/DHX 3.0 Coil", "Scythe w/DHX 3.0 Coil", "1619");}

if(document.bike.FCompany.value == 'Banshee' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Scythe w/Swinger X4 Coil", "Scythe w/Swinger X4 Coil", "1640");}

if(document.bike.FCompany.value == 'Banshee' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Rampant w/RP2", "Rampant w/RP2", "1618");}

if(document.bike.FCompany.value == 'Banshee' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Rampant w/Swinger X3", "Rampant w/Swinger X3", "1510");}

if(document.bike.FCompany.value == 'Banshee' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Morphine", "Morphine", "691");}

if(document.bike.FCompany.value == 'Banshee' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Scirocco", "Scirocco", "590");}

//Banshee Road
if(document.bike.FCompany.value == 'Banshee' && document.bike.FP.value == 'Road'){
addOption(document.bike.Frame,"--", "--", "--");}

//Bianchi MTN
if(document.bike.FCompany.value == 'Bianchi' && document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Rune w/DHX 5.0 Air", "Rune w/ DHX 5.0 Air", "");}
}


function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		//selectbox.options.remove(i);
		selectbox.remove(i);
	}
}

function addOption(selectbox, value, text , price)
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;
	optn.title = price;

	selectbox.options.add(optn);
}


function getPrice(prc){
  document.getElementById('FramePrice').innerHTML = "$" + prc
}

[C++]

Brother, you really need to write more efficient code... I would love to help you but at this point the my eyes hurt and my browser is lagging just trying to scroll through this forum page. Here is a great rule of thumb. Any time you find yourself repeating code, there is room for improvement.

As an example, I shortened the first function of the last disgustingly big Javascript file you posted. I couldn't be bothered to do the other functions, because, after all, this isn't for my use.

function fillFrameCompany(){
	 //this function is used to fill the category list on load
	 var companies = array("Azonic", "Banshee", "Bianchi", "Brodie", "Brooklyn Machine Works", "Canfield Brothers", "Cannondale", "Cove",  "Ellsworth", "Foes", "Giant", "GT", "Haro", "Intense", "Iron Horse", "Karpiel", "Kona", "K2", "Marin", "Norco", "Rocky Mountain", "Santa Cruz", "Sinister", "Specialized", "Tomac", "Trek", "Yeti");

	 for (i = 0; i < companies.length; i++) {
		  addOption(document.bike.FCompany, companies[i], companies[i], "");
	 }
 }

Now, isn't that easier to read, maintain and update? Not only that, but efficient code is faster, too. Especially with those billion If statements you have there.