Not getting ClientID in ASP.Net

Question

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.

Answer 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!" />

Answer 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

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

Answer 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;
}

Answer 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;")%>'

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

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