JavaScript（或jQuery）在提交前在表单中进行数学运算

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

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

---

JS不是我的强项，但我知道我需要使用一个隐藏的div来显示JS生成的文本，还有一些代码来确保“total”四舍五入到小数点后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>

函数doTheMath（）
{
//做点什么
//提交表格
返回true；
}

jQuery不是必需的，但很有用

方法

方法

---

如果需要进行四舍五入：

var rounded = Math.round(parseFloat($this.val()) * 100) / 100;

您可以这样做：

HTML:

这将完成计算并在您键入时显示

JS Fiddle:

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

---

听起来完全可行。您正在寻找用于为自己编写代码的方法？使用$（'selector'）。change（）eventInline事件是个坏主意。这只是解决方案的一半，而内联事件处理程序可以被视为坏做法……它很突兀。您应该使用js或jqueryI中的事件处理程序。如果他们一键入它，我会非常高兴不显示它，但是我的“客户端”（同事）想查看金额。我很确定我不能在表单中创建表单，所以这是我下一个“最佳”解决方案。如果我想在这个页面上收集输入并在另一个页面上计算，我会使用PHP（这是表单其余部分的显示方式）。要添加舍入，只需更改一行：

num_math=math.round（num_field.value*mult_field）；

​<form method="post">
<span>Type here:</span><input type="text" id="num"></input>
</form>

<span id="display_text"></span>

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;
}​

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);
    }
}