Not getting ClientID in ASP.Net

I have ASP.Net page where i am calling a JavaScript function like this:

 Enter server name: <asp:TextBox ID="txt_name" runat="server"></asp:TextBox>
 <asp:Button ID="btn_view" runat="server" OnClick="View_btn_click" OnClientClick="return  AlertOnGo('View Configuration',document.getElementById('<%= txt_name.ClientID %>').value)" Text ="GO!" />

But on clicking the GO button, i am getting the following error:

JavaScript runtime error: Unable to get property ‘value’ of undefined or null reference

On viewing the rendered code for the button:

<input type="submit" name="btn_view" value="GO!" onclick="return AlertOnGo('View Configuration',document.getElementById('<%= txt_name.ClientID %>').value);" id="btn_view" />

It is not putting the appropriate ClientID. I tried setting the CLientIDMode to static for the test box, yet no help.

This question is similar to this unanswered question.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

There are a few solutions to this problem.

One of the simpler would be to move the name into a JavaScript variable since the problem only occurs within the control when trying to evaluate txt_name.ClientID inside the OnClientClick attribute of an ASP.NET control.

<script>
var txtName = '<%= txt_name.ClientID %>';
</script>

Enter server name: <asp:TextBox ID="txt_name" runat="server"></asp:TextBox>
 <asp:Button ID="btn_view" runat="server" OnClick="View_btn_click" 
OnClientClick="return  AlertOnGo('View Configuration', 
document.getElementById(txtName).value)" Text ="GO!" />

Method 2

you can use the property ClientIDMode="Static" inside the asp:textbox tag

like this

<asp:TextBox ClientIDMode="Static" ID="txt_name" runat="server"></asp:TextBox>
<asp:Button ID="btn_view" runat="server" OnClick="View_btn_click" 
 OnClientClick="return  AlertOnGo('View Configuration', 
 document.getElementById(txtName).value)" Text ="GO!" />

this way the client id of the text box would be same as the “id” and you can use
document.getElementById('txt_name').value

and it works for me

Method 3

Youre using <%= %> in the property of an asp.net web control – I wouldnt expect that to work, since the whole control will be replaced by html.

I would move your javascript out into a script block and attach the event handler in code rather than putting it all inline.

Enter server name: <asp:TextBox ID="txt_name" runat="server"></asp:TextBox>
 <asp:Button ID="btn_view" runat="server" OnClick="View_btn_click" Text ="GO!" />
<script>
document.getElementById('<%= btn_view.ClientID %>').attachEvent('click', function() {
     return AlertOnGo('View Configuration',
                        document.getElementById('<%= txt_name.ClientID %>').value);
});
</script>

Method 4

— edited answer —
aspx

<asp:Button ID="btn_view" runat="server" OnClick="View_btn_click" OnClientClick="javascript:return  AlertOnGo('View Configuration');" Text ="GO!" />

script

function AlertOnGo(mode)
{
  var btnId = '<%= txt_name.ClientID %>';
  var value=document.getElementById(btnId).value;

//your code

return false;
}

Method 5

I prefer to use String.Concat. You can use u0027 instead of apostrophe.

OnClientClick='<%#String.Concat("document.getElementById(u0027", AddToCartBtn.ClientID.ToString(), "u0027).value = u0027Adding...u0027;")%>'

Method 6

Another solution is you can go to browser do insect element read the dynamic Id of textbox and set that in javascript like:

var ddlFunction = document.getElementById('ctl00_SPWebPartManager1_g_ecede3f6_2b87_405a_af1b_70401bb8d4c7_ddlFunction');

Html:

<asp:DropDownList ID="ddlFunction" runat="server" CssClass="dropDownClass">
    <asp:ListItem Selected="True">Select One</asp:ListItem>
    <asp:ListItem>Sample 1</asp:ListItem>
    <asp:ListItem>Sample 2</asp:ListItem>
</asp:DropDownList>

Method 7

You can create a css class and use that instead of client id, (with jQuery $(‘.txt_name’).text()):

Enter server name:

 <asp:TextBox ID="txt_name" CssClass="txt_name" runat="server"></asp:TextBox>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0