如何使用javascript计算html表单的活动总数

How to calculate active total using javascript for html form

本文关键字：活动 表单 html 何使用 javascript 计算      更新时间：2023-09-26

我有一个html表单，我想在表单的底部生成一个运行总数。我也想做一些其他简单的计算，但我无法找到任何关于做简单的计算使用javascript。我不希望有人为我这样做，我只是希望有人指出我在正确的方向aka什么如何创建一个函数，以多个数量乘以价格，并添加多于一个创建一个总数。

粗糙的例子:

 <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数据库当提交

我希望这不是很难解释。

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

如果你想使用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);
});
});

基本上，每当价格或数量发生变化时，您都要列举输入的每个数量。您可以通过查找price类的下一个兄弟来获得price值(假设price字段位于quantity字段之后，并且在文档中处于相同的级别)。然后解析它们的值——parseInt()表示数量，parseFloat表示价格。例如，10参数是强制基数以10为基数，因为js已知会"猜测"并接受十六进制值。如果由于值不是数字而无法进行计算，则小计将为NaN。我"或"它与0，所以我不试图将NaN添加到总数中。最后，我将结果放入total字段。

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

jsfiddle:

http://jsfiddle.net/nCub9/

这是我用来动态计算的。答案也是正确的，但对我来说，这对我简单的头脑来说太复杂了。感谢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>
相关文章：