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.
2 answers
solution1
1 ACCPTED 2011-09-27 03:41:05
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:
solution2
0 2011-09-29 18:54:25
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.