GridView textbox value insert in another textbox

Question

I have a GridView that contain Two TextBox and i want to insert value of TextBox1 into TextBox2 using only JavaScript. I am using ASP.Net C#

Here is my ASPX Code :

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript">
    function cal(t1, t2) {
        document.getElementById(t2).value = document.getElementById(t1).value;
    }
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None">
    <Columns>
        <asp:TemplateField HeaderText="Header1">
            <ItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server" onkeypress="cal('MainContent_TextBox1','MainContent_TextBox2')"
                onkeyup="cal('MainContent_TextBox1','MainContent_TextBox2')" onselect="cal('MainContent_TextBox1','MainContent_TextBox2')"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Header2">
            <ItemTemplate>
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:CommandField ShowDeleteButton="True" />
    </Columns>
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <RowStyle BackColor="#EFF3FB" />
    <EditRowStyle BackColor="#2461BF" />
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <AlternatingRowStyle BackColor="White" />
</asp:GridView>
</asp:Content>

I am using that code but this is not working.

Dgan · Accepted Answer · 2014-09-17 18:11:04Z

2

Try this

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            TextBox textBox1 = (TextBox)e.Row.FindControl("TextBox1");
            TextBox textBox2 = (TextBox)e.Row.FindControl("TextBox2");
            textBox1.Attributes.Add("onkeyup", "cal('" + textBox1.ClientID + "','" + textBox2.ClientID + "')");
            textBox1.Attributes.Add("onkeypress", "cal('" + textBox1.ClientID + "','" + textBox2.ClientID + "')");

        }
    }

add RowDataBound Event To GridView

OnRowDataBound="GridView1_RowDataBound"

and use this Javascript

<script type="text/javascript">
        function cal(t1, t2) {
            document.getElementById(t2).value = document.getElementById(t1).value;
        }
</script>

answered Sep 17, 2014 at 18:11

Dgan

10.3k1 gold badge33 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3834541 Over a year ago

Is that possible on JavaScript only? Why we use GridView1_RowDataBound.

Dgan Over a year ago

yes this is only in javascript.RowDataBound Just add event to the controls at runtime.

Krishnraj Rana Over a year ago

@Ganesh_Devlekar: I have already posted this answer. What is unique in your answer ??

Segfault · Accepted Answer · 2014-09-17 18:16:11Z

1

In the OnRowDataBound event of your GridView, you can do something like this -

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        TextBox textBox1 = (TextBox)e.Row.FindControl("TextBox1");
        TextBox textBox2 = (TextBox)e.Row.FindControl("TextBox2");
        textBox1.Attributes.Add("onkeyup", "cal('" + textBox1.ClientID + "','" + textBox2.ClientID + "')");
        textBox1.Attributes.Add("onkeypress", "cal('" + textBox1.ClientID + "','" + textBox2.ClientID + "')");
    }
}

and remove the attribute from textbox in itemtemplate of gridview.

<asp:TemplateField HeaderText="Header1">
     <ItemTemplate>
          <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
     </ItemTemplate>
</asp:TemplateField>

edited Sep 17, 2014 at 18:16

Segfault

8,3073 gold badges38 silver badges59 bronze badges

answered Sep 17, 2014 at 17:27

Krishnraj Rana

6,6583 gold badges33 silver badges37 bronze badges

4 Comments

user3834541 Over a year ago

how can i don this on JavaScript?

Krishnraj Rana Over a year ago

@user3834541: Using above code, your cal function will call for all textbox in gridview. See my modified answer... Modify your code as per the answer

user3834541 Over a year ago

It gives an Error "The name 'onkeyup' does not exist in the current context" in "textBox1.Attributes.Add(onkeyup, "cal('" + textBox1.ClientID + "','" + textBox2.ClientID + "')");" line.

Krishnraj Rana Over a year ago

@user3834541: Please add attribute in double quote("") like this - textBox1.Attributes.Add("onkeyup", "cal('" + textBox1.ClientID + "','" + textBox2.ClientID + "')");

Collectives™ on Stack Overflow

GridView textbox value insert in another textbox

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related