Javascript 下拉表单数学计算

标签 javascript html menu drop-down-menu

我正在尝试创建一个页面,其中有两个下拉菜单,然后当用户按下提交时,它会根据下拉菜单中提供的数据计算价格。它需要从第一个下拉菜单选项中取 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>

最佳答案

也许您正在寻找这样的东西:

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.

关于Javascript 下拉表单数学计算,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3278214/

相关文章:

javascript - 使用 json_encode 将 php 变量转为 javascript

javascript - 具有按钮状态更改的表单并不总是提交

javascript - 搜索多个属性

javascript - 使用 JavaScript 动态更改背景颜色

jquery - 右侧带有关闭按钮的 Bootstrap 列表

Jquery DIV 元素上下滚动?

asp.net - 将样式应用于 asp.net 中的菜单

java - 如何检查所选菜单项是否是菜单?

php - 从 PHP 链接访问 JavaScript 变量

javascript - 隐藏激活的子菜单(切换)