CODEWITHSUNDEEP
javascripthtml
Josiah
Josiah

Reputation: 83

Get total sum from input box values using Javascript, with decimals

I copied this from another answer, and it works, but I need to get the two numbers behind the decimal. This rounds...

Qty1 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br>
Qty2 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br>
Qty3 : <input onblur="findTotal()" type="text" name="qty" id="qty3"/><br>
Qty4 : <input onblur="findTotal()" type="text" name="qty" id="qty4"/><br>
Qty5 : <input onblur="findTotal()" type="text" name="qty" id="qty5"/><br>
Qty6 : <input onblur="findTotal()" type="text" name="qty" id="qty6"/><br>
Qty7 : <input onblur="findTotal()" type="text" name="qty" id="qty7"/><br>
Qty8 : <input onblur="findTotal()" type="text" name="qty" id="qty8"/><br>

Total : <input type="text" name="total" id="total"/>

<script type="text/javascript">
function findTotal(){
var arr = document.getElementsByName('qty');
var tot=0;
for(var i=0;i<arr.length;i++){
    if(parseInt(arr[i].value))
        tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
}

</script>

Upvotes: 0

Views: 1489

Answers (4)

frogatto
frogatto

Reputation: 29285

Instead of parseInt use parseFloat. And then use toFixed() for displaying only 2 decimals.

Upvotes: 0

Josiah
Josiah

Reputation: 83

function findTotal(){
var arr = document.getElementsByName('qty');
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseFloat(arr[i].value))       // parseFloat() instead of parseInt()
    tot += parseFloat(arr[i].value);    // parseFloat() instead of parseInt()
}
document.getElementById('total').value = tot.toFixed(2);
}

Upvotes: 1

Saqib Amin
Saqib Amin

Reputation: 1171

Replace you script with following:

<script type="text/javascript">
function findTotal(){
var arr = document.getElementsByName('qty');
var tot=0;
for(var i=0;i<arr.length;i++){
    if(parseFloat(arr[i].value))
        tot += parseFloat(arr[i].value).toFixed(2);
}
document.getElementById('total').value = tot;
}

</script>

Upvotes: 2

ozil
ozil

Reputation: 7117

Qty1 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br>
Qty2 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br>
Qty3 : <input onblur="findTotal()" type="text" name="qty" id="qty3"/><br>
Qty4 : <input onblur="findTotal()" type="text" name="qty" id="qty4"/><br>
Qty5 : <input onblur="findTotal()" type="text" name="qty" id="qty5"/><br>
Qty6 : <input onblur="findTotal()" type="text" name="qty" id="qty6"/><br>
Qty7 : <input onblur="findTotal()" type="text" name="qty" id="qty7"/><br>
Qty8 : <input onblur="findTotal()" type="text" name="qty" id="qty8"/><br>

Total : <input type="text" name="total" id="total"/>

<script type="text/javascript">
function findTotal(){
var arr = document.getElementsByName('qty');
var tot=0;
for(var i=0;i<arr.length;i++){
    if(parseFloat(arr[i].value))       // parseFloat() instead of parseInt()
        tot += parseFloat(arr[i].value);    // parseFloat() instead of parseInt()
}
document.getElementById('total').value = tot;
}

</script>

Upvotes: 1

Related Questions