如何使用 javascript 为 html 表单计算活动总数答案

【问题标题】：How to calculate active total using javascript for html form如何使用 javascript 为 html 表单计算活动总数
【发布时间】：2011-09-27 03:24:02
【问题描述】：

我有一个 html 表单，我想在表单底部生成一个运行总计。我还想做一些其他简单的计算，但我找不到任何关于使用 javascript 进行简单计算的事情。我不想有人为我做这件事，我只想有人给我指出正确的方向，也就是如何创建一个函数将一个数量乘以一个价格，然后再加上一个以创建一个总数。

粗略的例子：

 <input type="text" name="qty1" onchange=""> <input type="text" name="price1" onchange="something">
 <input type="text" name="qty2" onchange=""> <input type="text" name="price2" onchange="something">

总数会是这样的

=(qty1*price1)+(qty2*price2) 等等，我想在提交时将此号码放在我的 sql 数据库中

我希望这并不难解释。

我也想跳过没有条目的字段。

【问题讨论】：

在你知道如何获取值之后，请记住 JavaScript 的浮点计算不好，所以最好将每个值乘以 100，然后对整数进行计算，然后除以 100。
将表单控件放入表单中，然后您可以将它们作为表单elements 集合的属性访问。让您的表单根据每个控件的 onchange 事件更新总数（或侦听冒泡变化在表格上）。继续发布您的进度。
@Eris，JavaScript 使用标准浮点数进行计算，没有什么“不好”的地方。你应该遵守当地关于金额、税金等计算的四舍五入规则，但 JavaScript 本身并没有错，也不需要除以 100。只需使用简单的 round、ceil 和 floor 函数数学，你应该没事。

标签： php javascript html sql

【解决方案1】：

如果您想使用 jQuery，请按照以下步骤操作：

HTML：

<div>
    <input type="input" class="qty" />
    <input type="input" class="price" />
</div>
<div>
    <input type="input" class="qty" />
    <input type="input" class="price" />
</div>
<div>
    <input type="input" class="qty" />
    <input type="input" class="price" />
</div>
Total: <span id="total"></span>

JavaScript：

jQuery(function($) {

$(".qty, .price").change(function() {
    var total = 0;
    $(".qty").each(function() {
        var self = $(this),
            price = self.next(".price"),
            subtotal = parseInt(self.val(), 10) * parseFloat(price.val(), 10);
        total += (subtotal || 0);
    });
    $("#total").text(total);
});

});

基本上，只要价格或数量发生变化，您就会枚举每个数量输入。您可以通过查找具有价格类的下一个兄弟来获得价格值（假设您的价格字段在数量字段之后并且在文档中处于同一级别）。然后解析它们的值—— parseInt() 用于数量， parseFloat 用于价格。例如， 10 参数是强制基数以 10 为底，因为 js 可以“猜测”并且将接受十六进制值。如果由于值不是数字而无法完成计算，则小计将为 NaN。我用 0“或”那个，所以我不会尝试将 NaN 添加到总数中。最后，我将结果放入总字段中。

你说你想把总数保存在某个地方。您需要使用 PHP 在服务器上执行此操作，不要从客户端发布值。客户端发布的任何值，无论是否是隐藏字段，都可能被客户端欺骗。你不能相信它。所以在服务器上根据发布的字段计算它。

jsfiddle:

http://jsfiddle.net/nCub9/

【讨论】：

Radix 参数只对 parseInt 有效，parseFloat 没有这个问题。

【解决方案2】：

这是我用来即时计算的。答案也是正确的，但对我来说，这对我简单的头脑来说太复杂了。感谢 InfinitiesLoop 和其他所有人的意见

 <html>
 <head>
 <script>
 function calculate(){ 
 if(isNaN(document.formname.qty.value) || document.formname.qty.value==""){ 
 var text1 = 0; 
 }else{ 
 var text1 = parseInt(document.formname.qty.value); 
 } 
 if(isNaN(document.formname.Cost.value) || document.formname.Cost.value==""){ 
 var text2 = 0; 
 }else{ 
 var text2 = parseFloat(document.formname.Cost.value); 
 } 
 document.formname.textbox5.value = (text1*text2); 
 } 
 </script>
 </head>

 <body>
 <form name="formname">
 <input type="text" name="qty" onblur="calculate()"<br/>
 <input type="text" name="Cost" onblur="calculate()"<br/>
 <input type="text" name="textbox5">
 </form>
 </body>
 </html>

【讨论】：

确保将第二个参数添加到 parseInt。一些用户可能会输入以零为前缀的值，而 JavaScript 将其视为八进制数。 IE。 0100 不是十进制的 100，而是 64。