Not able to access dynamically created textboxes in a gridview using Javascript

Posted Date: 12 Jul 2012 Posted By:: L Member Level: Bronze Member Rank: 3869 Points: 5 Responses: 3

Hi,

For e.g i need to display a list of employees. So in my gridview i have my first column as EmpName and 2nd and 3rd column and 4th column as template field with textboxes.

So for n number of employees , n number of textboxes would be created dynamically.

I need to access these textboxes in the javascript, as i need to add the values in 2nd and 3rd column and polpulate them in 4th column of each rowin a grid onblur of the 2nd column .

Can anyone let me know how can i get access to these controls (to add the values) in Javascript?

ASPx page

<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:BoundField DataField="EmpName" HeaderText="EmpName" />
<asp:TemplateField HeaderText="Value1">
<ItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Value2">
<ItemTemplate>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Value3">
<ItemTemplate>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>

</Columns>
</asp:GridView>

Responses

#680054 Author: jogesh Member Level: Gold Member Rank: 229 Date: 12/Jul/2012 Rating: Points: 3
You need to call a javascript method on blur of textbox. var i = 2; var txt1; var txt2; while(1) { txt1 =document.getElementById('GridView1_ctl0' + i.toString() + '_txtBox1'); txt2 =document.getElementById('GridView1_ctl0' + i.toString() + '_txtBox2'); var txt3 = document.getElementById('GridView1_ctl0' + i.toString() + '_txtBox3'); if(txt1!=null && txt2!=null) { txt3 = txt1 + txt2; } else { break; // all rows completed } }

#680365 Author:

Ajatshatru Upadhyay Member Level: Gold Member Rank: 19 Date: 14/Jul/2012 Rating: 2 out of 5

Points: 4

Hi,

Below is the solution using JQuery.
I am having a table as below:


create table emp
(
	emp_name nvarchar(10),
	emp_num1 int,
	emp_num2 int
)

I am populating the above table in below gridview (observe the changes I made in the textboxes)


<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="emp_name" HeaderText="EmpName" />
            <asp:TemplateField HeaderText="Value1">
                <ItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("emp_num1") %>'></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Value2">
                <ItemTemplate>
                    <asp:TextBox ID="TextBox2" runat="server" CssClass="total" Text='<%# Eval("emp_num2") %>'></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Value3">
                <ItemTemplate>
                    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    </div>
    </form>
</body>

Now below the JQuery function which adds the value of "TextBox1 and TextBox2" and put the sum into "TextBox3" ("onblur" of "TextBox1"):


<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("[id*=TextBox1]").blur(function () {
                if (isNaN(parseInt($(this).val()))) {
                    $(this).val('0');
                } else {
                    $(this).val(parseInt($(this).val()).toString());
                }
            });

            $("[id*=TextBox1]").blur(function () {
                if (!jQuery.trim($(this).val()) == '') {
                    if (!isNaN(parseInt($(this).val()))) {
                        var row = $(this).closest("tr");

                        $("[id*=TextBox3]", row).val(parseInt($(".total", row).val()) + parseInt($(this).val()));
                    }
                } else {
                    $(this).val('');
                }
            });
        });
    </script>
</head>

Let me know if you have any doubts.

Hope it'll help you.
Regards
Ajatshatru

#680985 Author: L Member Level: Bronze Member Rank: 3869 Date: 19/Jul/2012 Rating: Points: 1
Thanks jogesh and Ajatshatru.

Post Reply

This thread is locked for new responses. Please post your comments and questions as a separate thread.
If required, refer to the URL of this page in your new post.

	Next : Not able to get data in calling method from the call back method
	Previous : Required javascript for textbox in asp.net
	Return to Discussion Forum
	Post New Message
	Category:

Related Messages

Follow us on Twitter: https://twitter.com/dotnetspider

Active Members
Today

Last 7 Days

baskar (294)
Asheej T K (173)
Ultimaterengan (167)

more...

Awards & Gifts

Email subscription