CODEWITHSUNDEEP
javascripthtmlmenudrop-down-menu
AKor
AKor

Reputation: 8892

Javascript drop-down form math calculation

I'm trying to create a page where there are two dropdown menus, and then when the user presses submit, it calculates a price based on the data given from the dropdown menu. It needs to take either 1 or 2 from the first dropdown menu choice, multiply that by the value of the second dropdown menu choice, multiply that by 0.2, and output it when the user presses submit. I've tried to make it work but I keep getting NaN errors. Any help? 

<head>
<script type="text/javascript">
function price() {
        var sqBn = document.priceCalc.squareOrBanner;
        var Amt = document.priceCalc.number;
    var price = sqBn * Amt * 0.2;
    document.write(price);
}
</script>

<form name="priceCalc" action="priceCalcPage.html" onsubmit="document.write(price())">
<div align="center">
<select name="squareOrBanner">
<option value="1">Square</option>
<option value="2">Banner</option>
</select>

<select name="number">
<option value="250">250</option>
<option value="500">500</option>
<option value="750">750</option>
<option value="1000">1000</option>
</select>
<br><input type="submit" value="Figure out pricing!"><br>
</div>
</form>

Upvotes: 1

Views: 7382

Answers (2)

quantumSoup
quantumSoup

Reputation: 28172

Maybe you are looking for something like this:

http://jsfiddle.net/JSvSn/1/

You need to access the value property in those objects:

var price = sqBn.value * Amt.value * 0.2;

EDIT: Here's a version that updates the value of an input box with the price: http://jsfiddle.net/JSvSn/5/

EDIT 2: Show price in a div.

Upvotes: 2

Zsolti
Zsolti

Reputation: 1607

I'm not sure if the sqBn.value will work on all browsers. It would be safer to use

sqBn.options[sqBn.selectedIndex].value

and if you are still getting NaN results then try

parseInt(sqBn.options[sqBn.selectedIndex].value)

If you want to do this calculation without refreshing the page change the form declaration like this:

<form name="priceCalc" action="priceCalcPage.html" onsubmit="document.write(price());return false;">

In this way the onsubmit will be executed, but won't submit anything to the action. If you want to submit it, you can still do it from javascript (document.priceCalc.submit()).

Upvotes: 1

Related Questions