CODEWITHSUNDEEP
javascripthtmlformsfrontend
Jakeray
Jakeray

Reputation: 183

Form calculations with JavaScript

I coded a simple form to calculate a price by size, shape, color and quantity using JavaScript. The problem is when I add the values they won't show up. When I only get the total of the first select box it shows up. But not whne I try to add the totals and the quantity doesn't seem to work at all. I have tried many different variations of the code but just can't seem to get it to work.

Here is the HTML for the form.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Price Qoute</title>
  <script type="text/javascript" src="formCalc.js">
  </script>
</head>

<body onload='hideTotal()'>
 <form action="" id="price-quote">
  <select id="size" name="size" onchange="getTotal()">
    <option value="None">Select Size</option>
    <option value="2.5 inches">2.5 inches</option>
    <option value="3 inches">3 inches</option>
  </select>

<select id="shape" name="shape" onchange="getTotal()">
    <option value="None">Select Shape</option>
    <option value="Round">Round</option>
    <option value="Oval">Oval</option>
</select>

<select id="color" name="color" onchange="getTotal()">
   <option value="None">Select Color</option>
   <option value="One Color">One Color</option>
   <option value="Full Color">Full Color</option>
</select>

<label>Quantity</label><input type="text"  name="quantity" id="quantity"          onchange="getTotal()" />

</form>
<div id="totalPrice"></div>
</body>
</html>

and here is the JavaScript

var size_prices= new Array();
size_prices["None"]=0;
size_prices["2.5 inches"]=.10;
size_prices["3 inches"]=.20;

function getSizePrice()
{
    var sizePrice=0;
    var theForm = document.forms["price-quote"];
    var selectedSize = theForm.elements["size"];
    sizePrice = size_prices[selectedSize.value];
    return sizePrice;
}

var shape_prices= new Array();
shape_prices["None"]=0;
shape_prices["Round"]=.10;
shape_prices["Oval"]=.20;

function getShapePrice()
{
    var shapePrice=0;
    var theForm = document.forms["price-quote"];
    var selectedShape = theForm.elements["shape"]; 
    shapePrice = shape_prices[selectedShape.value];
    return shapePrice;
}

var color_prices= new Array();
color_prices["None"]=0;
color_prices["One Color"]=1;
color_prices["Full Color"]=3;

function getColorPrice()
{
    var colorPrice=0;
    var theForm = document.forms["price-quote"];
    var selectedColor = theForm.elements["color"];
    colorPrice = color_prices[selectedColor.value];
    return colorPrice;
}

function getQuantity()
{
    var theForm = document.forms["price-quote"];
    //Get a reference to the TextBox
    var quantity = theForm.elements["quantity"];
    var howmany =0;
    //If the textbox is not blank
    if(quantity.value!="")
    {
        howmany = parseInt(quantity.value);
    }
    return howmany;
}

function getTotal()
{
    //Here we get the total price by calling our function
    //Each function returns a number so by calling them we add the values they return           together
    var instantPrice = getSizePrice() + getShapePrice() + getColorPrice(); 
    //display the result
    document.getElementById('totalPrice').innerHTML =
                                  "$"+instantPrice;
}

What am I doing wrong?

!!!!Update!!!!

Ok I had a typo so I got the form to calculate the prices of the select boxes but still no go on the quantity. I really need to have this update dynamically as the users types (without a button or hitting enter) if at all possible.

Upvotes: 1

Views: 2244

Answers (2)

RobG
RobG

Reputation: 147343

A few comments:

Even though most browsers will make the first option of a select element selected by default, some may not. So alway give the default option the selected attribute.

You can make things a bit easier by have option values like "2.5" rather than "2.5 inches".

In your code:

> var size_prices= new Array();
>  size_prices["None"]=0;
>  size_prices["2.5 inches"]=.10;
>  size_prices["3 inches"]=.20;

Here you are using an array like an object. It is better to use the right tool for the job, so use an object:

 var size_prices= { 
      'None': 0,
      '2.5 inches': 0.10,
      '3 inches': 0.20
 };

The same goes for the color_prices "array".

[...]

>     var sizePrice=0;

If you are not going to use the value assigned, then don't assign one. You assign a value later, so just declare the variable:

 var sizePrice;

In the getQuantity function:

> if(quantity.value!="") {
>      howmany = parseInt(quantity.value);
>  }
>  return howmany;

You really should check either the input value as it could be rubbish, or the returned value as it could be NaN (because the input was rubbish). And you should always include a radix wth parseInt in case 09 is entered:

alert(parseInt('09')); // 0
alert(parseInt('09', 10)); // 9

In the getTotal function:

> var instantPrice = getSizePrice() + getShapePrice() + getColorPrice();

Where does the quantity get included?

Edit

I don't know where you are going wrong, using the following:

 var instantPrice = (getSizePrice() + getShapePrice() +
                      getColorPrice()) * getQuantity();

I get what appears to be the correct value. You need to work on checking the value input for quantity and format the answer to two decimal places correctly though.

Upvotes: 0

Robert Peters
Robert Peters

Reputation: 4104

You need to narrow/break down the issue.

1) Try getting the value of the first select box on it's own (you've done this)

2) Try getting the value of the second select box on it's own.

3) Try getting the value of the third select box on it's own.

4) Finally try all three.

Just keep breaking down the problem util you narrow it down.

Cheers

Upvotes: 1

Related Questions