我有一个费用报告类型的表格,其中包含要求里程的输入。当用户输入一个数字时,我希望有一个自动计算功能来显示他们将得到报销的金额。
例如,如果用户输入“65”,则输入框右侧将是“65 x $.555 = $36.08”。
JS 不是我的强项,但我知道我需要使用隐藏的 div 来显示 JS 生成的文本,以及一些代码来确保“总数”四舍五入到小数点后 2 位。有什么想法/建议吗?
我有一个费用报告类型的表格,其中包含要求里程的输入。当用户输入一个数字时,我希望有一个自动计算功能来显示他们将得到报销的金额。
例如,如果用户输入“65”,则输入框右侧将是“65 x $.555 = $36.08”。
JS 不是我的强项,但我知道我需要使用隐藏的 div 来显示 JS 生成的文本,以及一些代码来确保“总数”四舍五入到小数点后 2 位。有什么想法/建议吗?
$(function () {
$('#amount').change(function () {
var $this = $(this);
$this.next('label').text((parseFloat($this.val()) * .555).toFixed(2))
});
});
jQuery 不是必需的,但很有帮助。
固定方法
var rounded = Math.round(parseFloat($this.val()) * 100) / 100;
在您的表单标签中,添加一个onsubmit
调用数学函数的属性。例如 :
<form action="movie.php" method="post" onsubmit="doTheMath()">
然后使用 Javascript 创建函数:
<script type="text/javascript">
function doTheMath()
{
// do something
// submit the form
return true;
}
</script>
你可以这样做:
HTML:
<form method="post">
<span>Type here:</span><input type="text" id="num"></input>
</form>
<span id="display_text"></span>
JS:
num_field = document.getElementById("num");
num_field.onkeyup=function () {
mult_field = 0.555;
num_math = num_field.value * mult_field;
num_string = num_field.value + "*" + mult_field + "=" + num_math;
document.getElementById("display_text").innerHTML = num_string;
}
这将进行数学运算并在您键入时显示它。
JS 小提琴:http: //jsfiddle.net/s9jcC/
使用纯 JavaScript
window.onload=function()
{
var txt=document.getElementById('amount');
var span=document.createElement('span');
txt.parentNode.insertBefore(span, txt.nextSibling);
txt.onkeyup=function()
{
span.innerHTML="";
var val=txt.value;
if(val.length > 0 && isNaN(val))
{
span.innerHTML=" Invalid number !";
return false;
}
var result=val*0.555;
if(parseFloat(result)>0) span.innerHTML=' $'+result.toFixed(2);
}
}