simple shopping cart problem

Discussion in 'Javascript' started by Randi, Apr 2, 2004.

  1. Randi

    Randi Guest

    Hi, I am trying to write this program to get this shopping cart to work. I
    need to use the calc function to determine the option prices, using the
    selectedIndex property for each dropdown list. This is what I have so far,
    I started with if statements, but I think i need to use a for loop, because
    of the array. Any help would be appreciated. The code I have so far is
    below.

    Thanks,

    Randi





    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Harmon's Computer Store</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="JavaScript">
    var basePrice = 799;

    var Ram = new Array(0, 70, 150, 280);
    var HD = new Array(0, 30, 70);
    var OS = new Array(0, 70, 150, 280);

    function Calc(myForm){
    if (myform.RAM.selectedIndex=0){
    price = basePrice;
    else if
    (myform.RAM.selectedIndex=1){
    price = basePrice + 70;}
    else if
    (myform.RAM.selectedIndex=2){
    price = basePrice + 150;}
    else if
    (myform.RAM.selectedIndex=3){
    price = basePrice + 280;}
    }



    </script>
    </head>

    <body>
    <p align="center"><font color="#FF0000" size="+2" face="Arial, Helvetica,
    sans-serif">Harmon's Computer Store</font></p>
    <table width="75%" border="0">
    <tr>
    <td width="35%"><div align="center"><img src="images.jpg" width="103"
    height="90"></div></td>
    <td width="65%">The base price of this computer is $799. Because this is
    a spring break
    special, the manufacturer offers limited options.</td>
    </tr>
    </table>
    <p>&nbsp;</p>
    <p>Intel Pentium 4 300 GHz , 128 MB RAM, 40 G Hard Drive, 48x/24x/48 CD RW,
    17&quot;
    color monitor.</p>
    <form name="myForm" method="post" onSubmit="Calc(myForm)">
    <p>Optional Upgrades</p>
    <p>
    <select name="RAM">
    <option>128 MB</option>
    <option>256 MB DDR(add $70)</option>
    <option>512 MB DDR (add $150)</option>
    <option>1 GM DDR (add $280)</option>
    </select>
    </p>
    <p>
    <select name="HardDrive">
    <option> 40 GB</option>
    <option>80 GB (add $30)</option>
    <option>120 GB (add $70) </option>
    </select>
    </p>
    <p>
    <select name="OS">
    <option>Windows XP Home Edition</option>
    <option>Windows XP Professional Edition (add $70)</option>
    <option>Windows XP Home Edition with Microsoft Plus (add $20)</option>
    <option>Windows XP Home Professional Edition with Microsoft Plus (add
    $90)</option>
    </select>
    </p>
    <p>Enter your name here:
    <input type="text" name="customerName">
    </p>
    <p>
    <input type="submit" name="Submit" value="Price">
    </p>
    <p>&nbsp;</p>
    </form>
    <p>&nbsp;</p>
    </body>
    </html>
     
    Randi, Apr 2, 2004
    #1
    1. Advertising

  2. Randi

    David Morris Guest

    First suggestion, change your select tags as follows:

    <select name="RAM" onChange="Calc();">
    <option value="0.00">128 MB</option>
    <option value="70.00">256 MB DDR(add $70)</option>
    <option value="150.00">512 MB DDR (add $150)</option>
    <option value="280.00">1 GM DDR (add $280)</option>
    </select>

    This will remove the need for your arrays.

    Second, add an input box somewhere as follows:

    <input name=price onFocus="blur();">

    Third, change your Calc() function as follows:

    function Calc() {
    basePrice += parseFloat(myform.RAM.value);
    basePrice += parseFloat(myform.HardDrive.value);
    basePrice += parseFloat(myform.OS.value);

    myform.Price.value = basePrice;
    }

    You will probably need to format the price to pad extra zero's so $120
    looks like $120.00.

    Hope this helps.

    Randi wrote:

    > Hi, I am trying to write this program to get this shopping cart to work. I
    > need to use the calc function to determine the option prices, using the
    > selectedIndex property for each dropdown list. This is what I have so far,
    > I started with if statements, but I think i need to use a for loop, because
    > of the array. Any help would be appreciated. The code I have so far is
    > below.
    >
    > Thanks,
    >
    > Randi
    >
    >
    >
    >
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    > <html>
    > <head>
    > <title>Harmon's Computer Store</title>
    > <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    > <script language="JavaScript">
    > var basePrice = 799;
    >
    > var Ram = new Array(0, 70, 150, 280);
    > var HD = new Array(0, 30, 70);
    > var OS = new Array(0, 70, 150, 280);
    >
    > function Calc(myForm){
    > if (myform.RAM.selectedIndex=0){
    > price = basePrice;
    > else if
    > (myform.RAM.selectedIndex=1){
    > price = basePrice + 70;}
    > else if
    > (myform.RAM.selectedIndex=2){
    > price = basePrice + 150;}
    > else if
    > (myform.RAM.selectedIndex=3){
    > price = basePrice + 280;}
    > }
    >
    >
    >
    > </script>
    > </head>
    >
    > <body>
    > <p align="center"><font color="#FF0000" size="+2" face="Arial, Helvetica,
    > sans-serif">Harmon's Computer Store</font></p>
    > <table width="75%" border="0">
    > <tr>
    > <td width="35%"><div align="center"><img src="images.jpg" width="103"
    > height="90"></div></td>
    > <td width="65%">The base price of this computer is $799. Because this is
    > a spring break
    > special, the manufacturer offers limited options.</td>
    > </tr>
    > </table>
    > <p>&nbsp;</p>
    > <p>Intel Pentium 4 300 GHz , 128 MB RAM, 40 G Hard Drive, 48x/24x/48 CD RW,
    > 17&quot;
    > color monitor.</p>
    > <form name="myForm" method="post" onSubmit="Calc(myForm)">
    > <p>Optional Upgrades</p>
    > <p>
    > <select name="RAM">
    > <option>128 MB</option>
    > <option>256 MB DDR(add $70)</option>
    > <option>512 MB DDR (add $150)</option>
    > <option>1 GM DDR (add $280)</option>
    > </select>
    > </p>
    > <p>
    > <select name="HardDrive">
    > <option> 40 GB</option>
    > <option>80 GB (add $30)</option>
    > <option>120 GB (add $70) </option>
    > </select>
    > </p>
    > <p>
    > <select name="OS">
    > <option>Windows XP Home Edition</option>
    > <option>Windows XP Professional Edition (add $70)</option>
    > <option>Windows XP Home Edition with Microsoft Plus (add $20)</option>
    > <option>Windows XP Home Professional Edition with Microsoft Plus (add
    > $90)</option>
    > </select>
    > </p>
    > <p>Enter your name here:
    > <input type="text" name="customerName">
    > </p>
    > <p>
    > <input type="submit" name="Submit" value="Price">
    > </p>
    > <p>&nbsp;</p>
    > </form>
    > <p>&nbsp;</p>
    > </body>
    > </html>
    >
    >
    >
     
    David Morris, Apr 2, 2004
    #2
    1. Advertising

  3. Randi

    David Morris Guest

    Oops, one error. In your function, you have to reset basePrice back to
    799 or your Calc() method will grow indefinitely. See below for change....

    David Morris wrote:

    > First suggestion, change your select tags as follows:
    >
    > <select name="RAM" onChange="Calc();">
    > <option value="0.00">128 MB</option>
    > <option value="70.00">256 MB DDR(add $70)</option>
    > <option value="150.00">512 MB DDR (add $150)</option>
    > <option value="280.00">1 GM DDR (add $280)</option>
    > </select>
    >
    > This will remove the need for your arrays.
    >
    > Second, add an input box somewhere as follows:
    >
    > <input name=price onFocus="blur();">
    >
    > Third, change your Calc() function as follows:
    >
    > function Calc() {

    basePrice = 799;
    > basePrice += parseFloat(myform.RAM.value);
    > basePrice += parseFloat(myform.HardDrive.value);
    > basePrice += parseFloat(myform.OS.value);
    >
    > myform.Price.value = basePrice;
    > }
    >
    > You will probably need to format the price to pad extra zero's so $120
    > looks like $120.00.
    >
    > Hope this helps.
    >
    > Randi wrote:
    >
    >> Hi, I am trying to write this program to get this shopping cart to
    >> work. I
    >> need to use the calc function to determine the option prices, using the
    >> selectedIndex property for each dropdown list. This is what I have so
    >> far,
    >> I started with if statements, but I think i need to use a for loop,
    >> because
    >> of the array. Any help would be appreciated. The code I have so far is
    >> below.
    >>
    >> Thanks,
    >>
    >> Randi
    >>
    >>
    >>
    >>
    >>
    >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    >> <html>
    >> <head>
    >> <title>Harmon's Computer Store</title>
    >> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    >> <script language="JavaScript">
    >> var basePrice = 799;
    >>
    >> var Ram = new Array(0, 70, 150, 280);
    >> var HD = new Array(0, 30, 70);
    >> var OS = new Array(0, 70, 150, 280);
    >>
    >> function Calc(myForm){
    >> if (myform.RAM.selectedIndex=0){
    >> price = basePrice;
    >> else if
    >> (myform.RAM.selectedIndex=1){
    >> price = basePrice + 70;}
    >> else if
    >> (myform.RAM.selectedIndex=2){
    >> price = basePrice + 150;}
    >> else if
    >> (myform.RAM.selectedIndex=3){
    >> price = basePrice + 280;}
    >> }
    >>
    >>
    >>
    >> </script>
    >> </head>
    >>
    >> <body>
    >> <p align="center"><font color="#FF0000" size="+2" face="Arial, Helvetica,
    >> sans-serif">Harmon's Computer Store</font></p>
    >> <table width="75%" border="0">
    >> <tr>
    >> <td width="35%"><div align="center"><img src="images.jpg" width="103"
    >> height="90"></div></td>
    >> <td width="65%">The base price of this computer is $799. Because
    >> this is
    >> a spring break
    >> special, the manufacturer offers limited options.</td>
    >> </tr>
    >> </table>
    >> <p>&nbsp;</p>
    >> <p>Intel Pentium 4 300 GHz , 128 MB RAM, 40 G Hard Drive, 48x/24x/48
    >> CD RW,
    >> 17&quot;
    >> color monitor.</p>
    >> <form name="myForm" method="post" onSubmit="Calc(myForm)">
    >> <p>Optional Upgrades</p>
    >> <p>
    >> <select name="RAM">
    >> <option>128 MB</option>
    >> <option>256 MB DDR(add $70)</option>
    >> <option>512 MB DDR (add $150)</option>
    >> <option>1 GM DDR (add $280)</option>
    >> </select>
    >> </p>
    >> <p>
    >> <select name="HardDrive">
    >> <option> 40 GB</option>
    >> <option>80 GB (add $30)</option>
    >> <option>120 GB (add $70) </option>
    >> </select>
    >> </p>
    >> <p>
    >> <select name="OS">
    >> <option>Windows XP Home Edition</option>
    >> <option>Windows XP Professional Edition (add $70)</option>
    >> <option>Windows XP Home Edition with Microsoft Plus (add $20)</option>
    >> <option>Windows XP Home Professional Edition with Microsoft Plus (add
    >> $90)</option>
    >> </select>
    >> </p>
    >> <p>Enter your name here:
    >> <input type="text" name="customerName">
    >> </p>
    >> <p>
    >> <input type="submit" name="Submit" value="Price">
    >> </p>
    >> <p>&nbsp;</p>
    >> </form>
    >> <p>&nbsp;</p>
    >> </body>
    >> </html>
    >>
    >>
    >>

    >
     
    David Morris, Apr 2, 2004
    #3
  4. On Fri, 02 Apr 2004 09:56:03 -0500, David Morris
    <> wrote:

    [fixed top-post]

    > David Morris wrote:
    >
    >> First suggestion, change your select tags as follows:
    >>
    >> <select name="RAM" onChange="Calc();">
    >> <option value="0.00">128 MB</option>
    >> <option value="70.00">256 MB DDR(add $70)</option>
    >> <option value="150.00">512 MB DDR (add $150)</option>
    >> <option value="280.00">1 GM DDR (add $280)</option>
    >> </select>
    >>
    >> This will remove the need for your arrays.
    >>
    >> Second, add an input box somewhere as follows:
    >>
    >> <input name=price onFocus="blur();">
    >>
    >> Third, change your Calc() function as follows:
    >>
    >> function Calc() {
    >> basePrice = 799;
    >> basePrice += parseFloat(myform.RAM.value);
    >> basePrice += parseFloat(myform.HardDrive.value);
    >> basePrice += parseFloat(myform.OS.value);
    >>
    >> myform.Price.value = basePrice;
    >> }
    >>
    >> You will probably need to format the price to pad extra zero's so $120
    >> looks like $120.00.


    Read the FAQ for a method of doing this:

    <URL:http://jibbering.com/faq/#FAQ4_6>

    [snipped OP]

    > Oops, one error. In your function, you have to reset basePrice back to
    > 799 or your Calc() method will grow indefinitely. See below for
    > change....


    Wouldn't it be a better idea to use a temporary variable during the
    calculation, otherwise you start introducing "magic numbers" into the code
    and increase maintenance.

    function Calc() {
    /* basePrice = 799; Don't do this. Use only
    the original declaration */

    var tmp = basePrice;

    tmp += parseFloat(myform.RAM.value);
    tmp += parseFloat(myform.HardDrive.value);
    tmp += parseFloat(myform.OS.value);

    myform.Price.value = tmp.toFixed( 2 );
    }

    The toFixed() call above assumes that you used the script shown in the
    cited FAQ entry.

    Mike

    --
    Michael Winter
    d (replace ".invalid" with ".uk" to reply)
     
    Michael Winter, Apr 2, 2004
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kylin
    Replies:
    1
    Views:
    353
    Kevin Spencer
    Apr 20, 2005
  2. =?Utf-8?B?Q2hpV2hpdGVTb3g=?=

    shopping cart problem

    =?Utf-8?B?Q2hpV2hpdGVTb3g=?=, Jan 29, 2007, in forum: ASP .Net
    Replies:
    5
    Views:
    390
    Mark Rae
    Jan 29, 2007
  3. SIMPLE asp shopping cart

    , Mar 23, 2006, in forum: ASP General
    Replies:
    7
    Views:
    389
    Egbert Nierop \(MVP for IIS\)
    Mar 24, 2006
  4. OM
    Replies:
    2
    Views:
    374
    Cdn Tech
    Sep 7, 2003
  5. Tony
    Replies:
    0
    Views:
    134
Loading...

Share This Page