CODEWITHSUNDEEP
jqueryasp.nethtml
Paradigm
Paradigm

Reputation: 189

Calculating Total ins JQuery

I had this question posted earlier but it was a bit different. I am taking a new approach and it doesnt seem to be working. I was wondering if I could get some help with figuring out where I am going wrong. The aim of this is to calculate while they are typing in values or as soon as they remove the focus from the text box

ASP:

 <asp:TextBox runat="server" ID="txtAmount1" CssClass="narrow"  text="0.00"  ClientIDMode="Static" class="PAmount"  /> 
 <asp:TextBox runat="server" ID="txtAmount2" CssClass="narrow"  text="0.00"  ClientIDMode="Static" class="PAmount"  /> 
 <asp:TextBox runat="server" ID="txtAmount3" CssClass="narrow"  text="0.00"  ClientIDMode="Static" class="PAmount"  /> 
  <asp:Literal ID="ltlGTotal" runat="server" Text="0.00" ></asp:Literal>
  <asp:TextBox runat="server" ID="txtTotalCost" CssClass="narrow"/>

JS:

  $('.PAmount').keyup(function () { 
    var total;
    for (var i = 0; i < $(this).length; ++i) {
        total += parseInt($(this)[i].val());
    }
    $('#ltlGTotal').val(total);
    $('#txtTotalCost').val(total);
});

Upvotes: 0

Views: 652

Answers (4)

Esha Garg
Esha Garg

Reputation: 144

Try this code

$('.PAmount').keyup(function () {
    var total=0;
    $('.PAmount').each(function () {
        total += parseInt($(this).val());
    });     
    $('#ltlGTotal').val(total);
    $('#txtTotalCost').val(total);
});

Upvotes: 1

Win
Win

Reputation: 62290

I do not recommand Total Textbox as editable.

Besides, there is no point of letting user enters value into Total.

For example, 1+2+3=8 (total will not be correct).

FYI: You cannot have both CssClass="narrow" and class="PAmount"; it is not a proper format.

<asp:TextBox runat="server" ID="txtAmount1" CssClass="narrow" 
  Text="0.00" ClientIDMode="Static"/>
<asp:TextBox runat="server" ID="txtAmount2" CssClass="narrow" 
  Text="0.00" ClientIDMode="Static"/>
<asp:TextBox runat="server" ID="txtAmount3" CssClass="narrow" 
  Text="0.00" ClientIDMode="Static"/>
<asp:Label ID="ltlGTotal" runat="server" Text="0.00" ClientIDMode="Static" />
<asp:TextBox runat="server" ID="txtTotalCost" ClientIDMode="Static" />
<asp:DropDownList runat="server" ID="DropDownList1" AutoPostBack="True">
    <asp:ListItem Text="One" Value="1"/>
    <asp:ListItem Text="Two" Value="2"/>
</asp:DropDownList>
<script>
    $(document).ready(function () {
        $('#ltlGTotal').html($('#txtTotalCost').val());

        $('.narrow').keyup(calculate);

        $('.total').keyup(calculate);

        function calculate() {
            var total = 0;
            $('.narrow').each(function () {
                if ($(this).val().length > 0) {
                    total += parseInt($(this).val());
                }
            });
            $('#ltlGTotal').html(total);
            $('#txtTotalCost').val(total);
        }
    });
</script>

Upvotes: 1

Code Maverick
Code Maverick

Reputation: 20415

Here is what I would do:

var $amountBoxes = $(":text.PAmount"),
    $grandTotal = $("#ltlGTotal"),
    $totalCost = $("#txtTotalCost");

$amountBoxes.on("keyup change", calculateTotal);

function calculateTotal()
{
    var total = 0;
    $amountBoxes.each(function () 
    {
        total += parseInt($(this).val());
    });
    $grandTotal.text(total.toString());
    $totalCost.val(total.toString());
};

Click here to view a working jsFiddle demo

Upvotes: 1

dacaballero
dacaballero

Reputation: 5

You can add a change event using the "narrow" css class like this:

$('.narrow').change(function () {
  var total;
   for (var i = 0; i < $(this).length; ++i) {
      total += parseInt($(this)[i].val());
   }
   $('#ltlGTotal').val(total);
  $('#txtTotalCost').val(total);
});

Hope it helps

Upvotes: 0

Related Questions