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开发者_如何学Go>
                    <itemstyle cssclass="gridviewColumnControls" />
                </asp:TemplateField>
        </Columns>
    </asp:GridView>

Thanks in advance.

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.

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.

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>