Question

我正在尝试创建一个页面，其中有两个下拉菜单，然后当用户按下提交时，它会根据下拉菜单中给出的数据计算价格。它需要从第一个下拉菜单选项中取1或2，再乘以第二个下拉菜单选项的值，再乘以0.2，并在用户按下提交时输出。我试图让它工作但我不断收到NaN错误。有帮助吗？

<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>

Answer 1

也许你正在寻找这样的东西：

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

您需要访问这些对象中的value属性：

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

编辑：这是一个以价格更新输入框值的版本：http://jsfiddle.net/JSvSn/5/

编辑2： Show price in a div.

Answer 2

我不确定sqBn.value是否适用于所有浏览器。使用

会更安全

sqBn.options[sqBn.selectedIndex].value

如果您仍然获得NaN结果，请尝试

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

如果您想在不刷新页面的情况下进行此计算，请更改表单声明，如下所示：

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

通过这种方式，onsubmit将被执行，但不会向该动作提交任何内容。如果你想提交它，你仍然可以通过javascript（document.priceCalc.submit()）。

来完成

Javascript下拉表单数学计算

2 个答案: