Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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]

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,302
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    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?"
    Last edited by Philip M; 11-24-2012 at 02:35 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    38
    Thanked 505 Times in 499 Posts

    Lightbulb

    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>

  • Users who have thanked jmrker for this post:

    Cory Beansack (11-25-2012)

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •