javascript - 计算单选按钮和下拉列表的价格
问题描述
我有一个从数据库填充的单选按钮列表和一个下拉列表:
<ul id="radio" class="input-list">
<?php
$stmt = mysqli_prepare($link, "SELECT id, name, price FROM cases ORDER BY price");
$stmt->execute();
$stmt->bind_result($case_id, $case_name, $case_price);
while($stmt->fetch()) {
echo '<li>
<input class="selectedoptions" id="'.$case_id.'" name="config-prod" value="'.$case_price.'" type="radio">
<label class="sub-label" for="'.$case_id.'">'.$case_name.' [£'.$case_price.']</label>
</li>';
}
$stmt->close();
?>
</ul>
<?php
echo "<select class='form-control' id='plist' name='partlist'>";
$type = "processors";
$stmt2 = mysqli_prepare($link, "SELECT id, name, price FROM parts WHERE type=?");
$stmt2->bind_param("s", $type);
$stmt2->execute();
$stmt2->bind_result($cpu_id, $cpu_name, $cpu_price);
while($stmt2->fetch()){
echo "<option value='$cpu_price'>$cpu_name</option>";
}
$stmt2->close();
echo "</select>";
?>
我希望能够从两个列表中获取所选项目的价格。我曾尝试用 JS 做到这一点:
<script>
var buildcost = 25.00;
function updateTotal() {
var radios = document.getElementsByName('config-prod');
var partcost;
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
partcost = parseInt(radios[i].value);
break;
}
}
total_cost = buildcost + partcost;
document.getElementById('total').innerHTML = total_cost;
}
</script>
total_cost 应该输出到这个:
<input name="buildTotal" id="total" type="text" class="transparentFieldy float-price" disabled="" />
但是,这不会输出任何内容。如何更改它以便能够根据所选元素计算价格?谢谢!
解决方案
要设置输入元素的内容,您必须使用value
-property 而不是innerHTML
. parseFloat
如果您正在处理货币,您还应该考虑使用。
let buildcost = 25.00;
function updateTotal() {
let radios = document.getElementsByName('config-prod');
let select = document.getElementById('plist');
let partcost = 0;
for (let i = 0, j = radios.length; i < j; i++) {
if (radios[i].checked) {
partcost = parseFloat(radios[i].value);
break;
}
}
partcost += parseFloat(select.options[select.selectedIndex].value);
let total_cost = buildcost + partcost;
document.getElementById('total').value = total_cost.toFixed(2);
}
<ul id="radio" class="input-list">
<li>
<input id="item-1" name="config-prod" value="1.00" type="radio" onchange="updateTotal();">
<label for="item-1">Item 1 [£1.00]</label>
</li>
<li>
<input id="item-2" name="config-prod" value="12.34" type="radio" onchange="updateTotal();">
<label for="item-2">Item 2 [£12.34]</label>
</li>
<li>
<input id="item-3" name="config-prod" value="9.99" type="radio" onchange="updateTotal();">
<label for="item-3">Item 3 [£9.99]</label>
</li>
</ul>
<select id="plist" name="partlist" onchange="updateTotal();">
<option value="99.99">CPU 1</option>
<option value="123.00">CPU 2</option>
<option value="250.54">CPU 3</option>
</select>
<br>
Total: <input id="total" type="text"><button id="update" onclick="updateTotal();">Update</button>
推荐阅读
- node.js - 无法建立mongodb图集连接
- python - 如何从python中图像中的网格中获取相同颜色的单元格
- json - jq:使用数学函数减少 json 数组
- c# - 在 Windows Forms-App (.Net Framework) C# 中重新启动用户控件
- git - 解决 git stash apply 上的合并冲突
- android - 运行前台服务时未调用 Android 地理围栏事件
- jenkins - 是否可以在 Jenkins 管道中使用升级的构建并在通过电子邮件批准后触发管道作业
- java - Array中的RecyclerView可点击按钮
- sql - 如何组合查询搜索以显示某些定义的值,同时不显示特定的定义值?
- javascript - 如何删除jpeg图像中的滚动条