How to multiply textbox value using javascript?

Question

4.80/5 (2 votes)

See more:

i have a textbox in a grid view control,when i enter some value like 2,3,4 ..then it multiply with 50 ...and it shows output in lable control..here label also in a gridview..how can i solve it..please help me..

Code Tried :

C#

protected void txtrate_TextChanged(object sender, EventArgs e)
    {

        GridViewRow currentRow = (GridViewRow)(sender as TextBox).Parent.Parent;
        float rate = 0;
        float kgrate50 = 50;

        rate = Convert.ToSingle((sender as TextBox).Text.Trim());
        kgrate50 = rate * kgrate50;
        (currentRow.Cells[3].FindControl("lbl50kg") as Label).Text = kgrate50.ToString();
        GVFeedType.Rows[currentRow.RowIndex + 1].Cells[2].FindControl("txtrate").Focus();
    }

Gridview code

C#

<pre lang="xml"><asp:GridView ID="GVFeedType" runat="server" Style="margin-bottom: 6px" BorderColor="#BDBDBD"
                                CssClass="center" Width="500px" AutoGenerateColumns="false">
                                <EmptyDataTemplate>
                                    No Records found</EmptyDataTemplate>
                                <Columns>
                                    <asp:BoundField HeaderText="SNo" DataField="SNo" ItemStyle-Width="50px" />
                                    <asp:BoundField HeaderText="Feed Type" DataField="FeedType" ItemStyle-Width="200px" />
                                    <asp:TemplateField HeaderText="Rate/Kg" ItemStyle-Width="80px" ItemStyle-HorizontalAlign="Center">
                                        <ItemTemplate>
                                            <asp:TextBox ID="txtrate" runat="server" Width="80px" MaxLength="8"
                                                onkeypress="return validatenumerics(event)" OnTextChanged="txtrate_TextChanged"
                                                AutoPostBack="true" />
                                            <asp:RequiredFieldValidator ID="RFVrecdate1" runat="server" ControlToValidate="txtrate"
                                                Display="None" ErrorMessage="Must Enter Rate" ValidationGroup="duereport"></asp:RequiredFieldValidator>
                                            <asp:ValidatorCalloutExtender ID="VCErecdate" runat="Server" TargetControlID="RFVrecdate1" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Rate/50Kg" ItemStyle-Width="80px">
                                        <ItemTemplate>
                                            <asp:Label ID="lbl50kg" runat="server" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
                            </asp:GridView>

Posted 5-Jan-14 1:21am

Siva Hyderabad

Updated 5-Jan-14 2:30am

v4

Add a Solution

Comments

Kornfeld Eliyahu Peter 5-Jan-14 7:22am

Have you done anything so far?

Siva Hyderabad 5-Jan-14 7:25am

yes..i tried with textbox_changed event...it working fine..but Cursor come back ...Tab button not working properly..

Kornfeld Eliyahu Peter 5-Jan-14 7:28am

Can you show the code you have (add to OP)?

Siva Hyderabad 5-Jan-14 7:31am

protected void txtrate_TextChanged(object sender, EventArgs e)
{

GridViewRow currentRow = (GridViewRow)(sender as TextBox).Parent.Parent;
float rate = 0;
float kgrate50 = 50;

rate = Convert.ToSingle((sender as TextBox).Text.Trim());
kgrate50 = rate * kgrate50;
(currentRow.Cells[3].FindControl("lbl50kg") as Label).Text = kgrate50.ToString();
GVFeedType.Rows[currentRow.RowIndex + 1].Cells[2].FindControl("txtrate").Focus();
}

Kornfeld Eliyahu Peter 5-Jan-14 7:35am

Not too clear.
What do you mean by 'but Cursor come back' and 'Tab button not working'?

Siva Hyderabad 5-Jan-14 7:37am

@Kornfeld Eliyahu Peter ,when i press tab again it is coming back to previous text box..with text changed event

Kornfeld Eliyahu Peter 5-Jan-14 7:41am

So you DO get back to the client with the computed value but when pressing the <tab> key you receive an another server side event of TextChanged?

Karthik_Mahalingam 5-Jan-14 8:11am

y cant you try in javascript ??
no need to worrry about the post back and focus issues .....

Siva Hyderabad 5-Jan-14 8:25am

please send java script code for this ?

Karthik_Mahalingam 5-Jan-14 8:26am

post your gridview markup code..

Siva Hyderabad 5-Jan-14 8:38am

i sent my gridview markup code

Karthik_Mahalingam 5-Jan-14 8:43am

ok i wil chk and let you know..

Karthik_Mahalingam 5-Jan-14 9:17am

check my solution..

Siva Hyderabad 5-Jan-14 9:21am

kk

2 solutions

Solution 1

change

onkeypress="return validatenumerics(event)"

to

onkeyup="return validatenumerics(this)"

script:

XML

<script>
       var kgRate = 50;

       function validatenumerics(e)
       {
           e.parentElement.nextElementSibling.children[0].innerText = (e.value * kgRate || 0);
       }
   </script>

P.S. Very straightforward way...

Posted 5-Jan-14 3:01am

David Dekanozishvili

Comments

Karthik_Mahalingam 5-Jan-14 9:34am

good

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2014-01-05T03:17:00

using javascript and jquery
Take care of your validations and ajax extenders, i have ignored for testing...

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-1.10.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        function calculate(thisobj) {
            var textboxValue = thisobj.value + "";
            var rate = parseInt(textboxValue);
            var $lbl50kg = $('span[id*="lbl50kg"]', $(thisobj).parent().parent());
            rate = rate * 50;
            $lbl50kg.html(rate);
            return true;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="GVFeedType" runat="server" Style="margin-bottom: 6px" BorderColor="#BDBDBD"
        CssClass="center" Width="500px" AutoGenerateColumns="false">
        <EmptyDataTemplate>
            No Records found</EmptyDataTemplate>
        <Columns>
            <asp:BoundField HeaderText="SNo" DataField="SNo" ItemStyle-Width="50px" />
            <asp:TemplateField HeaderText="Rate/Kg" ItemStyle-Width="80px" ItemStyle-HorizontalAlign="Center">
                <ItemTemplate>
                    <asp:TextBox ID="txtrate" onkeyup="return calculate(this)" runat="server" Width="80px"
                        MaxLength="8" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Rate/50Kg" ItemStyle-Width="80px">
                <ItemTemplate>
                    <asp:Label ID="lbl50kg" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <br />
    <br />
    <br />
    <asp:Label ID="lbl" runat="server"></asp:Label>
    </form>
</body>
</html>