Unable to get correct element on a sharepoint page using document.getelementbyid('<%textboxID.ClientID%>')

Question

I have a sharepoint website which has multiple instances of the same visual webpart. On button click I am trying to get a textbox present in the usercontrol of the webpart using document.getelementbyid('<%textboxID.ClientID%>'). I get a textbox but it is always from the last instance of the webpart.

I have seen few articles related to document.getelementbyid not returning the controls according to their ID but think that's not the case here as I get a relevent control but from a diffrent instance of webpart.

Below is the srtipped down version on the web part's user control,

<script language="javascript" type="text/javascript">
function Excel_Clicked() {    
    var reportname = document.getElementById('<%=txtReportName.ClientID%>').value;

} </script>

<asp:HiddenField ID = "ReportName" runat="server"/>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
    <asp:Panel ID="mainPanel" runat="server" Width="98%">

        <asp:TextBox ID="txtReportName" runat="server" Visible="true"></asp:TextBox> 

        <asp:Panel ID="Panel1" runat="server" Height="350px">

            <div>
                <img id='ExcelImg' onclick="return Excel_Clicked();" src="~/_layouts/SmallExcel.png"
                    style="height: 20px; width: 20px; cursor: pointer" alt="Excel" />
            </div>
        </asp:Panel>
    </asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>

This webpart is dropped on a sharepoint webpage 3-4 time with slightly diffrent configurations. As I started earlier, the Excel_Clicked() function tries to get 'txtReportName' textbox on the current webpart but ends up with the textbox in the last instance of webpart . Needless to say that if there is only one instance of the webpart it work fine.

Answer 1

can you try:

me being me will presume this is javascript, if its the case try the following ;)

var reportname = document.getElementById('<%=txtReportName.ClientID%>').innerHTML;

else

var reportname = document.getElementById('<%=txtReportName.ClientID%>').innerHTML.value;

both should work just fine :)

EDIT

does sound like strange things happning ;) how about doing it this way

var reportname = document.getElementById('<%= Page.Master.FindControl("txtReportName").ClientID %>').value;

also i know this might sound silly but txtReportName.ID is that unique every time? if its not than it will do exactly what its doing now, getElementById should work on its own if the clientID is unique every time you create a new instance of the ascx it should contain uniqe IDs.

also like to note how are you adding the ascx to the page? through a webpart? or are the independant(directly put onto the page)?

EDIT

i would like to know 1, where does the button reside? on the webpart or on the ascx? also how many ascx are there going to be on the page? what im getting to is cant you assign to the ascx controls their ID through codebehind and get the values that way? it would be far easier!

How can I access Controls in VisualWebPart1.cs from UserControl.ascx

take a look at my example how im doing it :) , the only other option is to assign an event to the textbox in the ascx and call the javascript from that event that will pass the id values :)

http://forums.asp.net/t/1766299.aspx/1

another method similary as to what i stated above is getting the currently selected usercontrol through ID and get the crontrol within it.

 //ID is the ID of the user control
 UserControl uc = (UserControl)Page.FindControl(ID);

 TextBox firstName = uc.FindControl("txtReportName") as TextBox;

the code above goes into the button event :)

hope it helps :)

Answer 2

Are you able to use jquery? If so:

var reportname = $('#txtReportName');

Answer 3

Have you tried attaching the textbox to a class and then calling the class itself rather than the ID via jQuery and the like (I realize your original example uses the DOM but as has been noted, using ASP IDs with the DOM can be problematic). Something like...

var item = $(".MyTextBox").val();

...should work just fine (and in fact is more or less what I use whenever I need to do something with DOM objects on the client side).