Member Avatar for ligas84

image of my listview:

I want to total every row from my listview

tallies total infected people and percentage
____________________________________________________________________
CityID | City | Population | Male | Female | Total | Percentage |

Population, male, and female columns are user inputs
total column is male+female textbox value per row
percentage= (total/population)*100 also per row
to calculate total and percentage on every textchange

here is my html code:

<asp:ListView ID="ListView1" runat="server">
   <LayoutTemplate>
      <table style="border: solid 2px #336699;" cellspacing="0" cellpadding="3" rules="all">
         <tr style="background-color: #336699; color: White;">

            <th>City</th>
            <th>Population</th>
            <th>Male</th>
            <th>Female</th>
            <th>Total</th>
            <th>%</th>
         </tr>
         <tbody>
            <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />
         </tbody>
      </table>
   </LayoutTemplate>
   <ItemTemplate>
      <tr>
        <td> <asp:Label ID="lblCtyID" runat="server" Text='<%# Bind("CityID") %>' /> </td>
        <td> <asp:Label ID="lblCty" runat="server" Text='<%# Bind("CityName") %>'/> </td>
         <td><asp:TextBox ID="txtPopu" runat="server"/></td>
         <td>
         <asp:TextBox ID="txtMale" runat="server" Width="69px" ValidationGroup="check"/>
         <asp:RegularExpressionValidator ID="RegularExpressionValidator1" Display="Dynamic" runat="server" ForeColor="Maroon" SetFocusOnError="True" ControlToValidate="txtMale" ErrorMessage="X" ValidationExpression="[0-9]*" ValidationGroup="check"></asp:RegularExpressionValidator>
         </td>
         <td><asp:TextBox ID="txtFemale" runat="server" Width="69px" onpaste = "return false;" onkeyup ="keyUP(event.keyCode)" onkeydown = "return isNumeric(event.keyCode);"/></td>
         <td><asp:TextBox ID="txtTotal" runat="server" enabled="false" Width="85px"/></td>
         <td><asp:TextBox ID="txtPercent" runat="server" enabled="false" Width="85px"/></td>

      </tr>
   </ItemTemplate>
</asp:ListView>
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Save Info"
            Width="136px" />
<br />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:GeraldConnString2 %>"
            SelectCommand="SELECT [CityID], [CityName] FROM [Cities]"></asp:SqlDataSource>
  • 2 Contributors
  • 1 Reply
  • 677 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by crishjeny

Dani AI

Generated

A practical, robust approach is to stop relying on ASP.NET client IDs and give each textbox a CSS class (for example popu, male, female, total, pct). Make the computed fields readonly (use ReadOnly="true" on the server control) instead of disabling them so their values are available on postback. Attach a delegated input listener that finds the row for the changed input, recalculates that row (male+female) and percentage (total/population*100), and optionally updates a grand total.

document.addEventListener('DOMContentLoaded', function () {
  function getRow(el) { while (el && el.nodeName !== 'TR') el = el.parentNode; return el; }
  function num(v) { v = (v||'').toString().trim().replace(',', '.'); return isFinite(v) ? parseFloat(v) : 0; }

  function calcRow(row) {
    var pop = row.querySelector('input.popu'), m = row.querySelector('input.male'),
        f = row.querySelector('input.female'), tot = row.querySelector('input.total'),
        pct = row.querySelector('input.pct');
    if (!pop || !m || !f) return;
    var popv = num(pop.value), totv = num(m.value) + num(f.value);
    if (tot) tot.value = totv ? totv : '';
    if (pct) pct.value = popv > 0 ? ((totv / popv) * 100).toFixed(2) : '';
  }

  function calcAll() {
    document.querySelectorAll('table tr').forEach(calcRow);
    var sum = 0;
    document.querySelectorAll('input.total').forEach(function(t){ sum += num(t.value); });
    var g = document.getElementById('grandTotal'); if (g) g.textContent = sum;
  }

  document.body.addEventListener('input', function (e) {
    if (e.target && e.target.matches && e.target.matches('input.popu, input.male, input.female')) {
      calcRow(getRow(e.target)); calcAll();
    }
  });

  calcAll();
});

Notes and troubleshooting: use CssClass on your ASP.NET TextBox controls so the script can find them even after ASP.NET rewrites IDs. Prefer ReadOnly="true" to Enabled="false" so values are submitted on Save. Normalize commas to dots for locales that use comma decimals. If calculations don't run, confirm the classes exist and that the script runs after the ListView (wrap in DOMContentLoaded as shown). This advice builds on 's markup and replaces inline key handlers with a cleaner, maintainable client-side solution; thanks to for confirming the approach.

Member Avatar for crishjeny

Hi

This is very easy and good code for text box in list view and perform calculations in java script. It will help me in my system.thanks for giving me and helping me out.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.