• 0

[Javascript] adding text to table cell.


Question

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&lt;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&gt;=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

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

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

&lt;FORM name="drop_list" action=""&gt;

&lt;table border="1" bgcolor="#00CCFF"&gt;
&lt;tr&gt;
&lt;th&gt;Category&lt;/th&gt;
&lt;th&gt;Company&lt;/th&gt;
&lt;th&gt;Part&lt;/th&gt;
&lt;th&gt;Price&lt;/th&gt;
&lt;/tr&gt;

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

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


&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

Link to comment
https://www.neowin.net/forum/topic/646382-javascript-adding-text-to-table-cell/
Share on other sites

13 answers to this question

Recommended Posts

  • 0
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&gt;=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:

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

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

&lt;table border="1" bgcolor="#00CCFF"&gt;
&lt;tr&gt;
&lt;th&gt;Category&lt;/th&gt;
&lt;th&gt;Company&lt;/th&gt;
&lt;th&gt;Part&lt;/th&gt;
&lt;th&gt;Price&lt;/th&gt;
&lt;/tr&gt;

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

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


&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

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!

  • 0
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.

  • 0

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

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

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' &amp;&amp; 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' &amp;&amp; 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 &lt;= "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&gt;=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);
}

  • 0

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(!)

  • 0

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

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

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' &amp;&amp; document.drop_list.FPurpose.value == 'MTN'){
addOption(document.drop_list.Frame,"Anthem Advanced", "Anthem Advanced", "");

}//Giant Road
if(document.drop_list.FCompany.value == 'Giant' &amp;&amp; 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&gt;=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);
}

  • 0

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.
  • 0

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.

  • 0
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.

  • 0

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' &amp;&amp; document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"AZ-7", "AZ-7", "--");}

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

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

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

//Azonic Road
if(document.bike.FCompany.value == 'Azonic' &amp;&amp; document.bike.FP.value == 'Road'){
addOption(document.bike.Frame,"--", "--", "--");
}
//Banshee MTN
if(document.bike.FCompany.value == 'Banshee' &amp;&amp; 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' &amp;&amp; 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' &amp;&amp; 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' &amp;&amp; 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' &amp;&amp; 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' &amp;&amp; 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' &amp;&amp; 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' &amp;&amp; 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' &amp;&amp; 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' &amp;&amp; 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' &amp;&amp; document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Pyre w/Float RP23", "Pyre w/Float RP23", "1645");}

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

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

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

if(document.bike.FCompany.value == 'Banshee' &amp;&amp; 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' &amp;&amp; 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' &amp;&amp; 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' &amp;&amp; document.bike.FP.value == 'MTN'){
addOption(document.bike.Frame,"Rampant w/RP2", "Rampant w/RP2", "1618");}

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

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

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

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

//Bianchi MTN
if(document.bike.FCompany.value == 'Bianchi' &amp;&amp; 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&gt;=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
}

  • 0

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 &lt; 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.

This topic is now closed to further replies.
  • Posts

    • It's really pathetic that an MMA video game triggers your political rage...
    • Nvidia GeForce NOW gains support for seven more games as discounts continue by Pulasthi Ariyasinghe There's a brand-new update rolling out to Nvidia's GeForce NOW streaming service, and like every week, that means more games have received support on the platform. This week's drop has additions like Aphelion and Pro Cycling Manager 26 attached to it. Don't forget that the GeForce NOW summer sale is still active too. This limited-time offer drops the 12-month Performance membership from $99.99 to $64.99, saving members $35. At the same time, the 12-month Ultimate membership is currently going for $129.99, dropping the price by $70 from the original $199.99. Moreover, Nvidia reiterated that support for GOG single sign-in and game library is incoming this summer, joining stores like Steam, Ubisoft Connect, Battle.net, and Xbox. "Connect supported game store accounts and stream titles with GeForce RTX power. Games that include cloud-save functionality help keep progress intact across devices," added the company. "Start a game on one screen, pick up where playtime left off on another, and spend less time managing installs and storage space." Here are the games joining GeForce NOW's supported list this week: Embers of the Uncrowned Demo (New release on Steam, available 13) Pro Cycling Manager 26 (New release on Steam, available June 15) Aphelion (Steam) Citizen Sleeper (Epic Game Store, Free from June 18-25) Megastore Simulator (Steam) OPERATOR (Steam) Super Meat Boy 3D (Xbox, available on Game Pass) Keep in mind that, unlike subscription services like Game Pass or EA Play, a copy of a game must be owned by the GeForce NOW member (or at least have a license via PC Game Pass) to start playing via Nvidia's cloud servers. There is also a limit to how many hours subscribers can use the service per month, with extra time being purchasable in chunks.
    • 47% profit margin? Wtf!! I know companies are in business to make money but come on man. I know for a fact I'll never own one of these.
    • Most AI-powered mainframe migration vendors expected to fail by 2030, Gartner warns by Paul Hill Credit: Pexels You may have read that many companies still run code written in ancient programming languages like COBOL and pay a handsome sum for those who can maintain that code. Well, it looks like this area of the tech world could be the scene of an AI bubble. It turns out that there are mainframe exit vendors, helping companies move their legacy mainframe systems to modern cloud environments or servers such as Microsoft Azure and AWS, using generative AI tooling. Unfortunately, 75% of these vendors are now expected to pivot or cease operations as market realities take hold by 2030. Alessandro Galimberti from Gartner said: Some of the companies in the mainframe exit market are IBM, 21CS, BMC, Broadcom, Rocket Software, DXC, GTSG, and Kyndryl. The reasons some of these firms are expected to quit the market are a reset of market expectations and a decline in demand for one-size-fits-all migration solutions. The reset in expectations is likely to be driven by cost overruns and threats to business, and the potential occurrence of critical failures within businesses as a result of bad transition implementations. These insights from Gartner are pretty interesting because it’s a specific area of the market where doubt is being cast on generative AI. Many people have cast doubt on whether AI companies will successfully justify the massive amounts spent on GenAI to date, and this data from Gartner suggests the road could be rocky for GenAI.
  • Recent Achievements

    • Week One Done
      Classifyskilleducation earned a badge
      Week One Done
    • One Month Later
      eurospharma62 earned a badge
      One Month Later
    • Week One Done
      With What earned a badge
      Week One Done
    • Week One Done
      Harris Gilbert earned a badge
      Week One Done
    • One Month Later
      Vincian earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      532
    2. 2
      +Edouard
      166
    3. 3
      PsYcHoKiLLa
      71
    4. 4
      neufuse
      64
    5. 5
      ATLien_0
      63
  • Tell a friend

    Love Neowin? Tell a friend!