Ayman Ayman - 1 month ago 11
ASP.NET (C#) Question

Run Javascript function onchange event of DropDownList

I am using below JavaScript code to get row totals and grand total of grid-view

but the issue is

$Cost
value come from DropDownList
dllcost


so when i change cost value using DropDownList the total values don't update based on the selected cost value.

JavaScript Code

<script>
$(document).ready(function () {
$(".txtMult input").on('keyup mouseup', multInputs);
function multInputs() {
var $mult = 0;
var $mgrandvalue = 0;
$("tr.txtMult:gt(0):lt(-1)").each(function () {
var $Cost = $('.Cost', this).val();
var $MarketValue = $('.MarketValue', this).val();
var $Quantity = $('.Quantity', this).val();
var $total = $Cost * $Quantity;
var $mvalue = $MarketValue * $Quantity;
$mult += $total;
$mgrandvalue += $mvalue;

$('.multTotal', this).text($total.toFixed(2));
$('.mvalue', this).text($mvalue.toFixed(2));
});
$(".lblGrandCost").text($mult.toFixed(2));

$(".lblGrandmvalue").text($mgrandvalue.toFixed(2));
}
});
</script>


Grid-view

<asp:GridView ID="griditem" OnRowDataBound="griditem_RowDataBound" CssClass="table table-borded text-nowrap" GridLines="None" runat="server" ShowFooter="True" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField HeaderStyle-Width="225" ControlStyle-Width="225" HeaderText="Item">
<ItemTemplate>
<asp:DropDownList DataValueField="ItemID" AutoPostBack="true" OnSelectedIndexChanged="dllitem_SelectedIndexChanged" DataTextField="ItemName" ID="dllitem" CssClass="form-control" runat="server"></asp:DropDownList>
</ItemTemplate>
<HeaderStyle />
</asp:TemplateField>

<asp:TemplateField HeaderStyle-Width="225" ControlStyle-Width="225" HeaderText="Cost">
<ItemTemplate>
<asp:DropDownList ID="dllcost" CssClass="form-control Cost" runat="server"></asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Width="109" ControlStyle-Width="109" HeaderText="Market Value">
<ItemTemplate>
<asp:TextBox ID="txtmvalue" TextMode="Number" min="0" step="any" CssClass="form-control MarketValue" runat="server"></asp:TextBox>
</ItemTemplate>

</asp:TemplateField>
<asp:TemplateField HeaderStyle-Width="109" ControlStyle-Width="109" HeaderText="Quantity">
<ItemTemplate>
<asp:TextBox ID="txtQuantity" TextMode="Number" min="0" CssClass="form-control Quantity" runat="server"></asp:TextBox>
</ItemTemplate>

</asp:TemplateField>
<asp:TemplateField HeaderStyle-Width="50" HeaderText="Total Cost">
<ItemTemplate>
<asp:Label ID="lbltotalcost" CssClass="multTotal" runat="server"></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="lblgrandcost" Text="" runat="server" CssClass="lblGrandCost" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Width="50" HeaderText="Total M.Value">
<ItemTemplate>
<asp:Label ID="lbltotalmv" CssClass="mvalue" runat="server"></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="lbltotalmvfooter" Text="" runat="server" CssClass="lblGrandmvalue" />
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

Answer

You need to add the change event for dropdown like following.

$(".txtMult select").on('change', multInputs);
Comments