2

我有一个费用报告类型的表格,其中包含要求里程的输入。当用户输入一个数字时,我希望有一个自动计算功能来显示他们将得到报销的金额。

例如,如果用户输入“65”,则输入框右侧将是“65 x $.555 = $36.08”。

JS 不是我的强项,但我知道我需要使用隐藏的 div 来显示 JS 生成的文本,以及一些代码来确保“总数”四舍五入到小数点后 2 位。有什么想法/建议吗?

4

4 回答 4

4

例子

$(function () {
    $('#amount').change(function () {
         var $this = $(this);

        $this.next('label').text((parseFloat($this.val()) * .555).toFixed(2))            
    });        
});​

jQuery 不是必需的,但很有帮助。

固定方法

parseFloat方法


如果您需要进行四舍五入:

var rounded = Math.round(parseFloat($this.val()) * 100) / 100;
于 2012-04-23T17:53:16.457 回答
2

在您的表单标签中,添加一个onsubmit调用数学函数的属性。例如 :

<form action="movie.php" method="post" onsubmit="doTheMath()">

然后使用 Javascript 创建函数:

<script type="text/javascript">
function doTheMath() 
{
     // do something

     // submit the form
     return true;
}
</script>
于 2012-04-23T17:51:41.000 回答
1

你可以这样做:

HTML:

​&lt;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/

于 2012-04-23T18:07:38.423 回答
1

使用纯 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);
    }
}

例子。

于 2012-04-24T04:54:41.420 回答