simple shopping cart problem

**David Morris** · Jul 23 '05, 09:38 AM

Re: simple shopping cart problem

First suggestion, change your select tags as follows:

<select name="RAM" onChange="Calc( );">
<option value="0.00">12 8 MB</option>
<option value="70.00">2 56 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(myfo rm.RAM.value);
basePrice += parseFloat(myfo rm.HardDrive.va lue);
basePrice += parseFloat(myfo rm.OS.value);

myform.Price.va lue = 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:
[color=blue]
> 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="JavaS cript">
> 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.sel ectedIndex=0){
> price = basePrice;
> else if
> (myform.RAM.sel ectedIndex=1){
> price = basePrice + 70;}
> else if
> (myform.RAM.sel ectedIndex=2){
> price = basePrice + 150;}
> else if
> (myform.RAM.sel ectedIndex=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%"><di v 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> </p>
> <p>Intel Pentium 4 300 GHz , 128 MB RAM, 40 G Hard Drive, 48x/24x/48 CD RW,
> 17"
> 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>Windo ws XP Home Edition</option>
> <option>Windo ws XP Professional Edition (add $70)</option>
> <option>Windo ws XP Home Edition with Microsoft Plus (add $20)</option>
> <option>Windo ws XP Home Professional Edition with Microsoft Plus (add
> $90)</option>
> </select>
> </p>
> <p>Enter your name here:
> <input type="text" name="customerN ame">
> </p>
> <p>
> <input type="submit" name="Submit" value="Price">
> </p>
> <p> </p>
> </form>
> <p> </p>
> </body>
> </html>
>
>
>[/color]

**David Morris** · Jul 23 '05, 09:38 AM

Re: simple shopping cart problem

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:
[color=blue]
> First suggestion, change your select tags as follows:
>
> <select name="RAM" onChange="Calc( );">
> <option value="0.00">12 8 MB</option>
> <option value="70.00">2 56 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() {[/color]
basePrice = 799;[color=blue]
> basePrice += parseFloat(myfo rm.RAM.value);
> basePrice += parseFloat(myfo rm.HardDrive.va lue);
> basePrice += parseFloat(myfo rm.OS.value);
>
> myform.Price.va lue = 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:
>[color=green]
>> 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="JavaS cript">
>> 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.sel ectedIndex=0){
>> price = basePrice;
>> else if
>> (myform.RAM.sel ectedIndex=1){
>> price = basePrice + 70;}
>> else if
>> (myform.RAM.sel ectedIndex=2){
>> price = basePrice + 150;}
>> else if
>> (myform.RAM.sel ectedIndex=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%"><di v 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> </p>
>> <p>Intel Pentium 4 300 GHz , 128 MB RAM, 40 G Hard Drive, 48x/24x/48
>> CD RW,
>> 17"
>> 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>Windo ws XP Home Edition</option>
>> <option>Windo ws XP Professional Edition (add $70)</option>
>> <option>Windo ws XP Home Edition with Microsoft Plus (add $20)</option>
>> <option>Windo ws XP Home Professional Edition with Microsoft Plus (add
>> $90)</option>
>> </select>
>> </p>
>> <p>Enter your name here:
>> <input type="text" name="customerN ame">
>> </p>
>> <p>
>> <input type="submit" name="Submit" value="Price">
>> </p>
>> <p> </p>
>> </form>
>> <p> </p>
>> </body>
>> </html>
>>
>>
>>[/color]
>[/color]

**Michael Winter** · Jul 23 '05, 09:38 AM

Re: simple shopping cart problem

On Fri, 02 Apr 2004 09:56:03 -0500, David Morris
<dmorris@dynami cquest.com> wrote:

[fixed top-post]
[color=blue]
> David Morris wrote:
>[color=green]
>> First suggestion, change your select tags as follows:
>>
>> <select name="RAM" onChange="Calc( );">
>> <option value="0.00">12 8 MB</option>
>> <option value="70.00">2 56 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(myfo rm.RAM.value);
>> basePrice += parseFloat(myfo rm.HardDrive.va lue);
>> basePrice += parseFloat(myfo rm.OS.value);
>>
>> myform.Price.va lue = basePrice;
>> }
>>
>> You will probably need to format the price to pad extra zero's so $120
>> looks like $120.00.[/color][/color]

Read the FAQ for a method of doing this:

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

[snipped OP]
[color=blue]
> 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....[/color]

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(myfo rm.RAM.value);
tmp += parseFloat(myfo rm.HardDrive.va lue);
tmp += parseFloat(myfo rm.OS.value);

myform.Price.va lue = tmp.toFixed( 2 );
}

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

Mike

--
Michael Winter
M.Winter@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

simple shopping cart problem

simple shopping cart problem

Comment

Comment

Comment