Access Repeater values using JavaScript

Question

i searched a lot on NET, to get the solution, but i could not find

Can anyone tell me how to access the label and textbox values of repeater control inside using the javascript ?

This is my code

 <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
    <ItemTemplate>
        <table id="t1" width="200px:" style="background-color: skyblue" runat="server">
            <tr>
                <td>
                    <asp:TextBox ID="TextBox3" Text='<%#DataBinder.Eval(Container.DataItem, "empid")%>'
                        runat="server" />
                    <asp:CheckBox ID="CheckBox1" runat="server" />
                    <asp:Label ID="Label1" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "empid")%>'></asp:Label>
                    <asp:Label ID="lblname" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "ename")%>'></asp:Label>
                    <br />
                    <br />
                </td>
            </tr>
        </table>
    </ItemTemplate>
</asp:Repeater>

Now i want to access the label, textbox of repeater using javascript

@Diodeus

I tried your code

function submitAll() {
        var thisLabel = $('.myLabel').eq(0);
        alert(thisLabel);
    }

But i got the result in alert as

[object Object]

and @deostroll

I tried your code this way

But not getting anything

    function GetData() {
        var arrTables = document.getElementById('myDiv').getElementsByTagName('table');
        var tbl = arrTables[0];
        var td = tbl.childNodes[0].childNodes[0].childNodes[0];
        var txt = td.childNodes[0];
        alert(txt.value);        
    }

Please provide the relevant HTML you are asking about.

jfriend00
– jfriend00

2011-12-01 14:06:00 +00:00
Commented Dec 1, 2011 at 14:06 — jfriend00
– jfriend00, Commented Dec 1, 2011 at 14:06

Diodeus - James MacFarlane · Accepted Answer · 2011-12-01 14:45:02Z

2

<asp:Label ID="Label1" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "empid")%>'></asp:Label>

IDs must be unique, so you can't apply the same ID to all of the labels in your repeater. Use CSS class names instead.

<asp:Label CssClass="myLabel" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "empid")%>'></asp:Label>

Since jQuery comes with .NET you can use it instead of plain JavaScript to access these elements more easily.

var thisLabel = $('.myLabel').eq(0) where 0 is the index of the element since there can be many.

answered Dec 1, 2011 at 14:45

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

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

6 Comments

Dipa Ahuja Over a year ago

I m not able to post code how to post code? its being posted like paragraph

Dipa Ahuja Over a year ago

<code> function submitAll() { var thisLabel = $('.myLabel').eq(0); alert(thisLabel); } </code>

Dipa Ahuja Over a year ago

but on alert i got [object Object]

Diodeus - James MacFarlane Over a year ago

Yes, that gives you a reference to the object. You can get the value with $('.myLabel').eq(0).text() or $('.myLabel').eq(0).html()

Dipa Ahuja Over a year ago

Awsome. :) but its just giving single value, i have to get all the values so how can i get the count of rows of repeater so i can use it in for loop

|

deostroll · Accepted Answer · 2011-12-01 18:52:31Z

0

Wrap the repeater in a div with some id, say myDiv.

<div id="myDiv">
<!-- your repeater code -->
<asp:Repeater ID="Repeater1" runat="server"...>
<ItemTemplate>
<table>...</table>
</ItemTemplate>
</asp:Repeater>
</div>

Do a

var arrTables = document.getElementById('myDiv').getElementsByTagName('table');

Now arrTables is just array of all table elements inside the div. Find the ordinal of the desired table: For e.g. sake I am taking first table.

var tbl = arrTables[0];

Find the corresponding td of the table element:

var td = tbl.childNodes[0].childNodes[0].childNodes[0];

The above may vary based on how your browser loads the DOM and stuff. Hence I say you debug and find out for your self.

Once you get the td reference:

var txt = td.childNodes[0];

This will give the textbox. txt.nextSibling will give the label...and so on.

edited Dec 1, 2011 at 18:52

answered Dec 1, 2011 at 14:51

deostroll

12k22 gold badges94 silver badges168 bronze badges

1 Comment

Dipa Ahuja Over a year ago

I tried your code but not getting it , i put the <table> of repeater inside the <div id="mydiv"><table>.. and write the code this way function GetData() { var arrTables = document.getElementById('myDiv').getElementsByTagName('table'); var tbl = arrTables[0]; var td = tbl.childNodes[0].childNodes[0].childNodes[0]; var txt = td.childNodes[0]; alert(txt.value); }

Collectives™ on Stack Overflow

Access Repeater values using JavaScript

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related