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">
    <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">

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

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.

  • Abhishek, are you sure you are trying document.getElementById('<%= textboxID.ClientID %>').value correctly – Arsalan Adam Khatri Jan 23 '13 at 13:09
  • This is how i am using it, var reportname = document.getElementById('<%=txtReportName.ClientID%>').value; – Abhishek Gaonkar Jan 23 '13 at 13:18

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;


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

both should work just fine :)


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)?


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 :)


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 :)

  • Well I am able to get the value inside the textbox just fine. Problem is that the textbox selected is incorrect. There are 3 instances of this webpart on the page. If is click on the button in the first instance doucment.getElementById is giving me a textbox from the last instance. (I can tell that from the value returned.) – Abhishek Gaonkar Jan 23 '13 at 13:47
  • just ammended my answer – Ali Jafer Jan 23 '13 at 13:59
  • The ascx is added to the page via webparts. The ReportName ID gets decorated something like, 'ctl00_m_g_496598a6_dd5d_4aa8_aa2d_84dd6a2ad815_ctl00_txtReportName. So it's unique on the page...but the call '<%=("txtReportName").ClientID %>' might not give proper result as there would be multiple controls with the server side ID, txtReportName. Hence what woudl be the workarounf in this situation. document.getElementById('<%= Page.Master.FindControl("txtReportName").ClientID %>') will also run into the same issue as there is no way to decide upon which exact control we are looking for. – Abhishek Gaonkar Jan 23 '13 at 14:25
  • ok iv made another edit hope it answers your question – Ali Jafer Jan 23 '13 at 15:31

Are you able to use jquery? If so:

var reportname = $('#txtReportName');

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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.