如何使用JavaScript for HTML Form计算活动总计

Question

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

粗略的例子：

 <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数据库中

我希望这不难解释。

我也想跳过没有输入的字段。

Answer 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表示价格。 例如，由于js被“猜测”并且将接受十六进制值，因此10参数是将基数强制为10。 如果由于值不是数字而无法进行计算，则小计将为NaN。 我用0来“或”，所以我不尝试将NaN加到总数中。 最后，我将结果放入总字段。

您说过要将总数保存在某个地方。 您需要使用PHP在服务器上执行此操作，不要从客户端发布该值。 客户端可能会欺骗客户发布的任何值，无论是否为隐藏字段。 你不能相信它。 因此，从发布的字段在服务器上进行计算。

jsfiddle：

http://jsfiddle.net/nCub9/

Answer 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>

如何使用JavaScript for HTML Form计算活动总计

问题描述

2 个解决方案

解决方案1
1 已采纳 2011-09-27 03:41:05

解决方案2
0 2011-09-29 18:54:25

如何使用JavaScript for HTML Form计算活动总计

问题描述

2 个解决方案

解决方案1 1 已采纳 2011-09-27 03:41:05

解决方案2 0 2011-09-29 18:54:25

解决方案1
1 已采纳 2011-09-27 03:41:05

解决方案2
0 2011-09-29 18:54:25