CODEWITHSUNDEEP
c#javascript.netasp.netgridview
HotTester
HotTester

Reputation: 5768

How to update value of a textbox based on input of another textbox in a gridview using javascript?

I have a gridview in which i have two textboxes. The senarios is such that the value I enter in one (txtCharges) should come as * 10 in the other textbox (txtTotalCharges). How to achieve this using javascript ? Markup code for gridview is as follows:

<asp:GridView ID="grdFixedMontlhy" CssClass="gridview" runat="server" AutoGenerateColumns="False"
        Width="100%">
        <RowStyle CssClass="gridviewItemStyle" HorizontalAlign="center" />
        <Columns>
            <asp:CheckBoxField Text="Select" />
            <asp:BoundField DataField="Bill_HeadName" HeaderText="Head" />
            <asp:BoundField DataField="Applicable_Charges_Category_Text" HeaderText="Type" />
            <asp:TemplateField HeaderText="Charges" ItemStyle-CssClass="gridviewColumnControls">
                <ItemTemplate>
                    <asp:TextBox ID="txtCharges" runat="server" Text='<%# Bind("Charges") %>'></asp:TextBox>
                    <asp:FilteredTextBoxExtender ID="txtCharges_FilteredTextBoxExtender" runat="server"
                        Enabled="True" TargetControlID="txtCharges" ValidChars="0123456789.">
                    </asp:FilteredTextBoxExtender>
                </ItemTemplate>
                <ItemStyle CssClass="gridviewColumnControls" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Days" ItemStyle-CssClass="gridviewColumnControls">
                <asp:TemplateField HeaderText="Total Charges" ItemStyle-CssClass="gridviewColumnControls">
                    <itemtemplate>
                        <asp:TextBox ID="txtTotalCharges" runat="server" Text=""></asp:TextBox>
                        <asp:FilteredTextBoxExtender ID="txtTotalCharges_FilteredTextBoxExtender" 
                            runat="server" Enabled="True" TargetControlID="txtTotalCharges" 
                            ValidChars="0123456789.">
                        </asp:FilteredTextBoxExtender>
                    </itemtemplate>
                    <itemstyle cssclass="gridviewColumnControls" />
                </asp:TemplateField>
        </Columns>
    </asp:GridView>

Thanks in advance.

Upvotes: 1

Views: 2713

Answers (3)

War
War

Reputation: 8628

fail ... lack of understanding above ... put the script on the page that suryakiran suggests (with a slight alteration) ...

<script type="text/javascript">
function calculateTotalCharge(charge, total)
{
       $(total).val(parseInt($(charge).val())*10);
}
</script>

// in grid template
<asp:Textbox onkeyup='calculateTotalCharge(this, <%= totalchargestextbox.clientid %>)' ... />

as an attribute for the txtCharges box. that way each rows dynamic id for the total box is passed in to the js on the client when it's called.

Upvotes: 1

suryakiran
suryakiran

Reputation: 1996

You can add onKeyUp javascript event for the txtCharges as below

<asp:TextBox ID="txtCharges" runat="server" Text='<%# Bind("Charges")%>' onkeyup="calculateTotalCharge(this);"></asp:TextBox>

Now the Javascript as below

<script type="text/javascript">
function calculateTotalCharge(elem)
{
       var totChargeid = $(elem).attr("id").replace('_txtCharges', '_txtTotalCharges');
       $('#' + totChargeid).val(parseInt($(elem).val())*10);
}
</script>

Also you must do the required checkups for NAN. Hope this is helpful to you.

Upvotes: 2

Saanch
Saanch

Reputation: 1844

You can do this on the server side also 

<asp:TextBox ID="txtTotalCharges" runat="server" Text='<%# Convert.ToString(Convert.ToInt32(DataBinder.Eval(Container.DataItem, "Charges"))*10 )></asp:TextBox>

Upvotes: -2

Related Questions