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

我有一个费用报表类型表单，其中有一个输入要求的里程数。当用户键入一个数字时，我希望有一个自动计算功能，显示他们将报销的金额。例如，如果用户键入“65”，则在输入框的右侧将是“65 x $ .555 = $ 36.08”。JavaScript（或jQuery）在提交之前在表单中进行数学运算

JS并不是我的强项，但我知道我需要使用隐藏的div来显示JS生成的文本，以及一些代码以确保“总数”四舍五入到小数点后两位。任何想法/建议？

来源

2012-04-23 cfox

听起来完全可行的。您正在寻找使用代码为您？ – ControlAltDel 2012-04-23 17:50:12

使用$（'selector'）。change（）事件 – chepe263 2012-04-23 17:51:37

Example

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

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

jQuery的，但有帮助。

toFixed方法

parseFloat方法

如果你需要做的舍入：

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

来源

2012-04-23 17:53:16 Joe

在窗体标记中，添加调用数学函数的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-23 17:51:41 Furunomoe

内联事件是一个坏主意。 – ThiefMaster 2012-04-23 17:53:33

这只是一个解决方案，内联事件处理程序可以看作是不好的做法...其obtrusive ..你应该使用事件处理程序从js或jquery – RGB 2012-04-23 17:54:02

我会很高兴不会显示它，只要他们键入它，但是我的“客户”（同事）想要查看这笔金额。我很确定我无法在表单中填写表单，所以这是我的下一个“最佳”解决方案。如果我想收集在这个页面上的输入，并计算另一个我会用PHP（这是如何显示其余的表单）。 – cfox 2012-04-23 18:07:08

你可以这样做：

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/

来源

2012-04-23 18:07:38

要添加舍入，只需更改一行：'num_math = Math.round（num_field.value * mult_field）;' – 2012-04-23 18:12:10

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

Example.

来源

2012-04-24 04:54:41

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

回答

相关问题