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

Question

I have an html form that I want to have generate a running total at the bottom of the form. 我有一个HTML表单，希望在表单底部生成一个运行总计。 I also want to do some other simple calculations but I am unable to find anything about doing simple calculations using javascript.i dont want someone to do this for me I just want someone to point me in the right direction aka what how to create a function to multiple a quantity times a price and add more then one to create a total. 我也想做一些其他简单的计算，但是我找不到关于使用javascript.I进行简单计算的任何信息。我不希望有人为我做这件事，我只希望有人指出正确的方向，也就是如何创建函数将一个数量乘以一个价格乘以一个价格，然后再添加一个就可以形成一个总数。

Rough example: 粗略的例子：

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

and the total would be like this 总会是这样

=(qty1*price1)+(qty2*price2) and so on and i want place this number in my sql db when submited =(qty1*price1)+(qty2*price2)依此类推，提交时我想将此数字放在我的sql数据库中

I hope this isn't to difficult to explain. 我希望这不难解释。

I also want to skip fields with no entry. 我也想跳过没有输入的字段。

Answer 1

Here's how do it if you want to use jQuery: 如果要使用jQuery，请按以下步骤操作：

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

});

Basically, any time a price or quantity is changed, you enumerate each quantity input. 基本上，只要价格或数量发生变化，就可以枚举每个数量的输入。 You get the price value by finding the next sibling with the price class (assumes your price field is after the quantity field and is at the same level in the document). 您可以通过找到价格类别的下一个同级来获得价格值（假设您的价格字段位于数量字段之后，并且在文档中处于同一级别）。 Then parse their values -- parseInt() for the quantity, and parseFloat for the price. 然后解析其值-parseInt（）表示数量，parseFloat表示价格。 The 10 argument is to force the radix to base 10 since js is known to 'guess' and will accept hex values, for example. 例如，由于js被“猜测”并且将接受十六进制值，因此10参数是将基数强制为10。 If the calculation couldn't be done because the value wasn't a number, subtotal will be NaN. 如果由于值不是数字而无法进行计算，则小计将为NaN。 I "or" that with 0 so I don't try to add NaN to the total. 我用0来“或”，所以我不尝试将NaN加到总数中。 Finally, I put the result into the total field. 最后，我将结果放入总字段。

You said you want to save the total somewhere. 您说过要将总数保存在某个地方。 You need to do that on the server with PHP, don't post the value from the client. 您需要使用PHP在服务器上执行此操作，不要从客户端发布该值。 Any value posted by the client, whether it's a hidden field or not, can be spoofed by the client. 客户端可能会欺骗客户发布的任何值，无论是否为隐藏字段。 You can't trust it. 你不能相信它。 So calculate it on the server from the posted fields. 因此，从发布的字段在服务器上进行计算。

jsfiddle: jsfiddle：

http://jsfiddle.net/nCub9/ http://jsfiddle.net/nCub9/

Answer 2

This is what i used to calculate on the fly. 这就是我过去经常计算的。 The answer is correct as well but for me it was too complicated for my simple mind. 答案也是正确的，但对我来说，这对我简单的想法来说太复杂了。 Thank you InfinitiesLoop and everyone else for your input 感谢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