Issue with JQuery Function Formatting and sum or 2 text boxes

Question

Here is my code:

<script src="Scripts/jquery.formatCurrency-1.4.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".toCalculate").blur(function () {
            var total = 0;
            $(".toCalculate").formatCurrency(function (index, item) {
                temp = parseFloat($(item).val());
                if (isNaN(temp))
                    temp = 0;
                total = total + temp;
            });
            $(".total").val(total.toFixed(2));
        });
    });
</script>

What I am trying to do is enter in the number with formatting within each textbox and then I want to get the sum of which will be the total of all the textboxes. What am I doing wrong here. I thought I pretty much had it but all I am getting for an output is 0.00. Whats wrong here is the .total that is not giving the right output. What can I do to fix this so it works correctly? Please help. Thanks.

Answer 1

My guess is you want this:

HTML:

<input class="toCalculate" /><br/>
<input class="toCalculate" /><br/>
<input class="toCalculate" /><br/>
<input class="toCalculate" /><br/>
<hr/>
<input class="total">

JavaScript:

$(".toCalculate").on("blur", function(){    
    var total = 0;
    $(".toCalculate").each(function (index, item) {
        var temp = parseFloat($(this).val().replace(/[,$]/g,""));
        if (isNaN(temp))
            temp = 0;
        total = total + temp;
    }).formatCurrency();
    $(".total").val(total.toFixed(2)).formatCurrency(); 
});

Example: http://jsfiddle.net/C448Z/1/