显示动态变量(php和javascript)的总数
Show total of dynamic variables (php and javascript)
我有一个表单,它包括两个范围输入,用于设置$target值(如下面的代码所示)。提交时,表单将这些值存储到数据库中。最初会显示每个滑块存储的值,但随着范围滑块的移动,javascript会显示新选择的值。
我现在试图动态地显示总共2个范围输入,即根据存储的值显示总数。然而,如果移动范围滑块,总数也应该动态地改变。
<label for="monday">Monday - $<span id="monday"><?php echo number_format($set_monday) ?> </span></label>
<?php if (!empty($set_monday)) { ?>
<input type="range" min="0" max="5000" id="monday" name="monday" value=<?php echo $set_monday ?> step="100" oninput="showValue1(this.value)" />
<?php } else { ?>
<input type="range" min="0" max="5000" id="monday" name="monday" value="0" step="50" oninput="showValue1(this.value)" />
<?php } ?>
<script type="text/javascript"> function showValue1(newValue) { document.getElementById("monday").innerHTML=newValue;} </script>
<label for="tuesday">Tuesday - $<span id="tuesday"><?php echo number_format($set_tuesday) ?></span></label>
<?php if (!empty($set_tuesday)) { ?>
<input type="range" min="0" max="5000" id="tuesday" name="tuesday" value=<?php echo $set_tuesday ?> step="100" oninput="showValue2(this.value)" />
<?php } else { ?>
<input type="range" min="0" max="5000" id="tuesday" name="tuesday" value="0" step="50" oninput="showValue2(this.value)" />
<?php } ?>
<script type="text/javascript"> function showValue2(newValue) { document.getElementById("tuesday").innerHTML=newValue;} </script>
<label>Total Target = $
<?php
$sum_total = $set_monday + $set_tuesday;
echo number_format($sum_total);
?>
</label>
我不知道如何添加函数的输出,并混合添加php和javascript变量,有人能帮忙吗?
标签内的跨度和输入ID都是相同的,这是错误的。请确保HTML元素具有唯一的ID。此外,还需要javascript来动态计算总和。基于此,您的代码应该如下所示:
<label for="monday">Monday - $<span id="monday"><?php echo number_format($set_monday) ?> </span></label>
<?php if (!empty($set_monday)) : ?>
<input type="range" min="0" max="5000" id="mondayRange" name="monday" value=<?php echo $set_monday ?> step="100" oninput="showValue(this)" />
<?php else : ?>
<input type="range" min="0" max="5000" id="mondayRange" name="monday" value="0" step="50" oninput="showValue(this)" />
<?php endif; ?>
<label for="tuesday">Tuesday - $<span id="tuesday"><?php echo number_format($set_tuesday) ?></span></label><br>
<?php if (!empty($set_tuesday)) : ?>
<input type="range" min="0" max="5000" id="tuesdayRange" name="tuesday" value=<?php echo $set_tuesday ?> step="100" oninput="showValue(this)" />
<?php else : ?>
<input type="range" min="0" max="5000" id="tuesdayRange" name="tuesday" value="0" step="50" oninput="showValue(this)" />
<?php endif; ?>
<label id="total">Total Target = $
<?php
$sum_total = $set_monday + $set_tuesday;
echo number_format($sum_total);
?>
</label>
<script type="text/javascript">
function showValue(range)
{
var sum = parseInt(document.getElementById('mondayRange').value) + parseInt(document.getElementById('tuesdayRange').value);
document.getElementById(range.id.substr(0, range.id.length - 5)).innerHTML = range.value;
document.getElementById('total').innerHTML = 'Total Target = $' + sum;
}
</script>
相关文章:
- 如何使Javascript动态html表及其上的事件
- 使用JavaScript动态插入DIV的成本有多高
- Javascript动态变量(添加了随机数)
- JavaScript-动态SVG-onload属性-未触发事件
- 传递给 PHP 表单时 JavaScript 动态变量上的未定义索引
- 如何在没有ajax的情况下将javascript动态数据发送到php变量
- 使用javascript动态创建html内容/元素
- 带有多个答案选项的Javascript动态数组窗口
- JavaScript:动态扩展原型是一种糟糕的做法
- Javascript+动态菜单+当前链接样式(CSS)+基于PHP的网站
- javascript动态内容与选择长运行脚本
- Javascript:动态更改CSS文件+Cookie
- 使用javascript动态计算top属性
- 使用javascript动态选择幻灯片放映的图像
- 如何访问用javascript动态生成的textarea的文本内容
- Javascript动态表,每个单元格都有一个onmouse事件
- Php,Javascript-动态表单id's和动态验证
- JavaScript动态附加到搜索字段
- 如何将CSRF令牌添加到javascript动态生成的表单中
- 从Javascript动态构建JSON对象列表