I have a script that keeps running totals as values are being entered into a GridView form control.
This works great. Below is the code:
<script type="text/javascript">
$(function () {
$('[id*=txttaxpayerret]').keyup(function () {
totalcalculate();
});
window.onload = totalcalculate();
function totalcalculate() {
var total = 0;
for (var i = 0; i < $('.txttaxpayerret').length; i++) {
var temp = $('.txttaxpayerret')[i].value;
temp != "" ? temp : temp = 0;
total = parseFloat(temp) + parseFloat(total);
$('[id*=lblTotal]').html(total);
}
}
});
</script>
<asp:Label ID="lblTotal" runat="server"></asp:Label>
we recently switched from GridView control to Repeater and since then, the code stopped worked working.
I have been trying to modify to work with Repeater control but to no avail.
Any ideas how to get this code to continue to keep a running to total user's entry as they are being entered?
llblTotal is outside the Repeater control.
However, txttaxpayerret is inside the Repeater control
<asp:TextBox ID="txttaxpayerret" runat="server" Width="280px"></asp:TextBox>
UPDATED:
<asp:Repeater ID="rptAircraft" runat="server">
<ItemTemplate>
<tr>
<td>
<asp:TextBox ID="TextBox2" runat="server" Width="280px" Text='<%#Eval("taxpayerret") %>'></asp:TextBox>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
<tr>
<td>
<asp:TextBox ID="txttaxpayerret" CssClass="clsTxtToCalculate" runat="server" Width="280px"></asp:TextBox>
</td>
</tr>
</table>
asp:Button ID="btnAdd" runat="server" Width="70px" Text="Add More" onclick="btnAdd_Click" />
<asp:Label ID="lblTotal" runat="server"></asp:Label>
UPDATED:
<script type="text/javascript">
$(function () {
$('body').on('keyup', '.taxInput', function (e) {
totalcalculate();
});
window.onload = totalcalculate();
function totalcalculate() {
var total = 0;
for (var i = 0; i < $('.taxInput').length; i++) {
var temp = $('.taxInput')[i].value;
temp != "" ? temp : temp = 0;
total = parseFloat(temp) + parseFloat(total);
$('[id*=lblTotal]').html(total);
}
}
});
<table border="1" style="width:50%;text-align:center">
<tr>
<td style="width:100%;vertical-align: text-top;">
<asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="upPanael" runat="server">
<ContentTemplate>
<div><div>
<table border="1">
<tr>
<th>
AIRCRAFT REGISTRATION #:
</th>
<th>
RETURNED VALUE<br />
</th>
<th>
FOR TAX OFFICE USE ONLY<br />
</th>
<th> </th>
</tr>
<asp:Repeater ID="rptAircraft" runat="server">
<ItemTemplate>
<tr>
<td>
<asp:TextBox ID="TextBox1" runat="server" Width="530px" Text='<%#Eval("boatregNum") %>'></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Width="280px" Text='<%#Eval("taxpayerret") %>'></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox3" runat="server" Width="256px" Text='<%#Eval("fortaxofficeonly") %>'></asp:TextBox>
</td>
<td> </td>
</tr>
</ItemTemplate>
</asp:Repeater>
<tr>
<td>
<asp:TextBox ID="txtboatregNum" runat="server" Width="530px"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="txttaxpayerret" CssClass="taxInput" runat="server" Width="280px"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="txtfortaxofficeonly" runat="server" Width="256px"></asp:TextBox>
</td>
<td style="white-space:nowrap;">
<asp:Button ID="btnAdd" runat="server" Width="70px" Text="Add New" onclick="btnAdd_Click" />
<asp:Button ID="btnDelete" runat="server" Width="70px" Text="Remove" OnClick="btnDelete_Click" />
</td>
</tr>
</table>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
<table border="1" style="width: 87%; text-align: center">
<tr>
<td style="width: 43.6%;">
TOTAL >
</td>
<td style="width: 23.2%;">
<asp:Label ID="lblTotal" runat="server"></asp:Label>
</td>
<td class="auto-style4">
</td>
</tr>
</table>
protected void btnAdd_Click(object sender, EventArgs e)
{
DataTable dtAircraft = new DataTable();
dtAircraft = GetAircraftInfo();
if (ViewState["AircraftTable"] != null)
{
dtAircraft = (DataTable)ViewState["AircraftTable"];
rptAircraft.DataSource = dtAircraft;
rptAircraft.DataBind();
rptAircraft.Visible = true;
}
else
{
rptAircraft.DataSource = null;
rptAircraft.DataBind();
rptAircraft.Visible = false;
}
txtboatregNum.Text = string.Empty;
txttaxpayerret.Text = string.Empty;
txtfortaxofficeonly.Text = string.Empty;
}
private DataTable GetAircraftInfo()
{
DataTable dtAircraft = null;
if (ViewState["RowNumber"] != null)
{
int RowNumber = Convert.ToInt32((ViewState["RowNumber"]));
RowNumber++;
ViewState["RowNumber"] = RowNumber;
}
else
{
ViewState["RowNumber"] = 1;
}
if (ViewState["AircraftTable"] == null)
{
dtAircraft = new DataTable("AircraftTable");
dtAircraft.Columns.Add(new DataColumn("RowNumber", typeof(int)));
dtAircraft.Columns.Add(new DataColumn("boatregNum", typeof(string)));
dtAircraft.Columns.Add(new DataColumn("taxpayerret", typeof(string)));
dtAircraft.Columns.Add(new DataColumn("fortaxofficeonly", typeof(string)));
ViewState["AircraftTable"] = dtAircraft;
}
else
{
dtAircraft = (DataTable)ViewState["AircraftTable"];
}
DataRow dtRow = dtAircraft.NewRow();
dtRow["RowNumber"] = Convert.ToInt32(ViewState["RowNumber"]);
dtRow["boatregNum"] = txtboatregNum.Text.Trim();
dtRow["taxpayerret"] = txttaxpayerret.Text.Trim();
dtRow["fortaxofficeonly"] = txtfortaxofficeonly.Text.Trim();
dtAircraft.Rows.Add(dtRow);
ViewState["AircraftTable"] = dtAircraft;
return dtAircraft;
}
When you do this $('.txttaxpayerret') you're trying to get an input with a class named txttaxpayerret (Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors)
You can fix this by adding a class to your input.
<asp:TextBox ID="txttaxpayerret" CssClass="taxInput" runat="server" Width="280px"></asp:TextBox>
And then you can use that class as a selector:
$(function () {
$('body').on('keyup', '.taxInput', function (e) {
totalcalculate();
});
window.onload = totalcalculate();
function totalcalculate() {
var total = 0;
for (var i = 0; i < $('.taxInput').length; i++) {
var temp = $('.taxInput')[i].value;
temp != "" ? temp : temp = 0;
total = parseFloat(temp) + parseFloat(total);
$('[id*=lblTotal]').html(total);
}
}
});