Update Quantity in shopping cart with dropdownlist onchange event in ListView and change another textbox

Question

I have a shopping cart solution written with ASP.NET. In Cart Web Page I have a list view for products and each item has a DropDownList for quantity. I want to update total price of each item when user change quantity.

<table>
  <tbody>
    <tr>
      <td class="fone">
        <%# Eval("Total")%>
      </td>
        <td class="ftwo">
          <asp:DropDownList ID="lstCount" runat="server"  >
            <asp:ListItem Text="1" Value="1" />
            <asp:ListItem Text="2" Value="2" />
            <asp:ListItem Text="3" Value="3" />
            <asp:ListItem Text="4" Value="4" />
            <asp:ListItem Text="5" Value="5" />
          </asp:DropDownList>
        </td>
      <td class="ffour">
        <%# Eval("Price")%>
      </td>

I wrote this jQuery code to update the total price for each row:

$('.ftwo').change(function(){
  var price=$(this).closest('tr').find('.fone').html();
  var quantity =$(this).val();
  $(this).closest('tr').find('.ffour').html(price * quantity);
});

It works for me. The problem is that I want to update another <td> in another table:

 <table class="rtl white">
  <tbody>
     <tr class="first">
     <td class="first">
         <asp:Literal ID="txtSumPrice" runat="server" ></asp:Literal></td>
     </tr>

How do can I do this?

I write ASP.NET code to show SumPrice in pageLoad , but I wish to update txtSumPrice when user changes quantity in one row.

Answer 1

On the change event callback function, compute the total accumulated value and set it to the txtSumPrice field

$('.ftwo').on('change',function(){
   var price=$(this).closest('tr').find('.fone').html();
   var quantity =$(this).val();
   $(this).closest('tr').find('.ffour').html(price * quantity);
   var totalPrice=parseFloat($('span#txtSumPrice').val())+ parseFloat($(this).closest('tr').find('.ffour').text());
   $('span#txtSumPrice').val( totalPrice);
});

Happy Coding :)