HELP! - Need onChange of Drop menu to update image AND price.

Cory Beansack · 11-24-2012, 04:51 AM

Hi guys,

I'm in the very early stages of self-taught Javascript programming. My dad makes custom knives for a living and I'm trying to add a page to his website that will allow his customers to pick and choose their own options. I'm having troubles getting the drop menu to update the pricing after they select an option. Any help on how to update the pricing would be greatly appreciated. Here's the simple test page code I've created for me to work the bugs out:

[CODE]
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="Microsoft Theme" content="virtualgrey 011, default">
<title>New Page 1</title>

<script language="javascript">
var BladePrice = 0;
function changeBlade()
{
if (DamascusBladePattern.value == 01)
document.images.Blade.src="http://www.petermartinknives.com/KnifeBuilder/Folder/SideView/Blade01.jpg";
BladePrice += 0;
if (DamascusBladePattern.value == 02)
document.images.Blade.src="http://www.petermartinknives.com/KnifeBuilder/Folder/SideView/Blade02-SpearPointRandom.jpg";
BladePrice += 0;
if (DamascusBladePattern.value == 03)
document.images.Blade.src="http://www.petermartinknives.com/KnifeBuilder/Folder/SideView/Blade03-SpearPointTwist.jpg";
BladePrice += 25;
if (DamascusBladePattern.value == 04)
document.images.Blade.src="http://www.petermartinknives.com/KnifeBuilder/Folder/SideView/Blade04-SpearPointPool.jpg";
BladePrice += 50;
if (DamascusBladePattern.value == 05)
document.images.Blade.src="http://www.petermartinknives.com/KnifeBuilder/Folder/SideView/Blade05-SpearPointLadder.jpg";
BladePrice += 50;
}
</script>
</head>
<body><p>
<img src="KnifeBuilder/Folder/SideView/Blade01.jpg" name="Blade" width="267" height="175"></p>
<p>
<select name="DamascusBladePattern" onChange="changeBlade()" style="font-size: 12pt">
<option selected value="01">Select Blade Shape & Damascus Pattern</option>
<option value="02">Spear Point - Random Pattern + $0</option>
<option value="03">Spear Point - Twist Pattern + $25</option>
<option value="04">Spear Point - Pool / Birdseye Pattern + $50</option>
<option value="05">Spear Point - Ladder Pattern + $50</option>
</select>
</p>
<script>
document.write("Total Price is: $" + BladePrice)
</script>
</body>
</html>
[CODE]

Philip M · 11-24-2012, 01:20 PM

You have omitted the braces around your if statements, in which case only the one single line following is executed.

if (DamascusBladePattern.value == "01") { // string literal values must be in quotes
document.images.Blade.src="http://www.petermartinknives.com/KnifeBuilder/Folder/SideView/Blade01.jpg";
BladePrice += 0;
}

It is recommended that you place the opening brace following the function, if, else, for, while, do, switch, and try statements on the same line and not on the following line.

<script language=javascript> is long deprecated. Use <script type = "text/javascript"> instead (in fact also deprecated but still necessary for IE<9).

The closing code tag is [/CODE]

Your code is defective in that if the user changes his mind and selects a different option the price of the newly selected blade is added to that of the previous selection. Move var BladePrice = 0; into the function.

document.write() is in effect obsolete. document.write() statements must be run before the page finishes loading. Any document.write() statement that runs after the page finishes loading will create a new page and overwrite all of the content of the current page (including the Javascript which called it). So document.write() is at best really only useful to write the original content of your page. It cannot be used to update the content of your page after that page has loaded.

To be candid, if this is a commercial site I would pay a professional to do it for you. There are many pitfalls in creating an e-commerce site. Presumably you would not attempt to service or repair a machine or appliance without any experience or understanding of how it worked.

A teacher informed my son that "There are two words which you should never use in school homework - one is cool and the other is gross". "No problem", replied the boy, "What are the two words?"

Cory Beansack · 11-25-2012, 01:49 AM

Thanks for the advice so far. My dad isn't rich, so paying a professional is out of the question. I like a challenge and enjoy programming, so I'm trying to learn all that I can about it. My main learning has come from the internet so far, with many outdated websites, so I apologize for the ancient coding methods.

What should be used instead of document.write() to display the variable as text after it is updated by the user's selection?

jmrker · 11-25-2012, 04:10 AM

You'll need a lot more validation code and some way to save or transfer the selections
to your site, but this should get you started...

Code:

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="Microsoft Theme" content="virtualgrey 011, default">
<title>New Page 1</title>
</head>
<body>
<form name="myForm" onsubmit="return false"> <!-- add validation code here for onsubmit() -->
<p>
<img src=""http://www.petermartinknives.com/KnifeBuilder/Folder/SideView/Blade01.jpg" id="Blade" width="267" height="175"></p>
<p>
<select id="DamascusBladePattern" onChange="changeBlade()" style="font-size: 12pt">
 <option selected value="01">Select Blade Shape & Damascus Pattern</option>
 <option value="02">Spear Point - Random Pattern + $0</option>
 <option value="03">Spear Point - Twist Pattern + $25</option>
 <option value="04">Spear Point - Pool / Birdseye Pattern + $50</option>
 <option value="05">Spear Point - Ladder Pattern + $50</option>
</select>
</p>
<div id="totalPrice">Total Price is: </div>
</form>

<script language="javascript">
var BladePrice = 0;
function changeBlade() {
  BladePrice = 250;  // base price before special addons (or 0?)
  var DamascusBladePattern = document.getElementById('DamascusBladePattern').value;
  if (DamascusBladePattern == '01') {
    document.getElementById('Blade').src="http://www.petermartinknives.com/KnifeBuilder/Folder/SideView/Blade01.jpg";
    BladePrice += 0; }
  if (DamascusBladePattern == '02') {
    document.getElementById('Blade').src="http://www.petermartinknives.com/KnifeBuilder/Folder/SideView/Blade02-SpearPointRandom.jpg";
    BladePrice += 0; }
  if (DamascusBladePattern == '03') {
    document.getElementById('Blade').src="http://www.petermartinknives.com/KnifeBuilder/Folder/SideView/Blade03-SpearPointTwist.jpg";
    BladePrice += 25; }
  if (DamascusBladePattern == '04') {
    document.getElementById('Blade').src="http://www.petermartinknives.com/KnifeBuilder/Folder/SideView/Blade04-SpearPointPool.jpg";
    BladePrice += 50; }
  if (DamascusBladePattern == '05') {
    document.getElementById('Blade').src="http://www.petermartinknives.com/KnifeBuilder/Folder/SideView/Blade05-SpearPointLadder.jpg";
    BladePrice += 50; }
  document.getElementById('totalPrice').innerHTML = 'Total Price is: $'+BladePrice;
}
</script>
</body>
</html>

Cory Beansack · 11-25-2012, 07:19 AM

In between these forum posts I was actually able to make it work in a very similar fashion using the innerHTML code. The web page is already laid out with a total of 7 drop menu choices.

The starting price is $450 just to make the most basic folding knife, which explains why some of the choices have a + $0 price...those are the entry level options, and everything else is an upcharge.

Eventually, the "total" math will have to be add up the base price plus the 7 user selected options, something like: "TotalPrice = BasePrice + BladePrice + BolsterPrice + HandlePrice + LinerPrice + FillerBarPrice + BladeSpinePrice + ThumbstudPrice".

Each of the other drop menus are laid out very similar to the one in this code so that an image is also updated with each selection.