How to calculate active total using 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. 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.

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

I hope this isn't to difficult to explain.

I also want to skip fields with no entry.

After you know how To get the values, keep in mind floating point calculations of JavaScript are not good, so better multiply by 100 every value, and make the calculations on integers, then divide by 100. — Eric Fortis
– Eric Fortis, Commented Sep 27, 2011 at 3:31
Put your form controls in a form, then you can access them as properties of the form's elements collection.Have your form update the totals based on each control's onchange event (or listen for a bubbling change on the form). Keep posting your progress. — RobG
– RobG, Commented Sep 27, 2011 at 3:43
@Eris, JavaScript uses standard floats for computing, there is nothing "not good" with it. You should observe your local rules for rounding with regards to amount, tax, etc. calculation, but there is nothing inherently wrong with JavaScript and there is no need to divide and multiply by 100. Just use simple round, ceil and floor functions available in Math and you should be fine. — Milan Babuškov
– Milan Babuškov, Commented Sep 29, 2011 at 19:19

InfinitiesLoop · Accepted Answer · 2011-09-27 03:41:05Z

Here's how do it if you want to use 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);
});

});

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. The 10 argument is to force the radix to base 10 since js is known to 'guess' and will accept hex values, for example. If the calculation couldn't be done because the value wasn't a number, subtotal will be NaN. I "or" that with 0 so I don't try to add NaN to the total. 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. 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:

http://jsfiddle.net/nCub9/

Radix argument is only valid for parseInt, parseFloat does not have that problem.

Justin Yoder · Accepted Answer · 2011-09-29 19:00:38Z

0

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

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

edited Sep 29, 2011 at 19:00

answered Sep 29, 2011 at 18:54

Justin Yoder

5375 gold badges8 silver badges17 bronze badges

1 Comment

Milan Babuškov Over a year ago

Make sure you add second parameter to parseInt. Some users might enter values prefixed with zero, and JavaScript treats this as octal numbers. I.e. 0100 is not 100 decimal, it's 64.

Collectives™ on Stack Overflow

How to calculate active total using javascript for html form

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related