change the text of asp:textbox placeholder using jquery

Question

Is there a way to change the text of the placeholder of asp:textbox using jquery? i tried to use:

   $('#textbox1').attr("placeholder", "enter some text");

but nothing happens below is my asp textbox:

<asp:TextBox ID="textbox1" placeholder="Text" runat="server"  ></asp:TextBox>

Answer 1

You need to add a few elements to the jQuery so that it will find the textbox you are looking for:

$("#<%=textbox1.ClientID %>").attr("placeholder", "enter some text");

Since you are using an 'asp:TextBox', when the webpage is compiled, .Net adds values to it's ID, resulting in the ID of the textbox no longer being equal to 'textbox1'. By using <%=textbox1.ClientID %> it allows you to search for the original ID that you named the textbox in the code.

For Example: In one of my webpages, I have this textbox:

<asp:TextBox runat="server" ID="nameTextBox" CssClass="form-control"></asp:TextBox>

When I run my webpage and look at the compiled version of the html code, its ID is now this:

id="ctl00_Content_propertiesDXCallbackPanel_nameTextBox"

As you can see .Net has added data to the ID of the textbox to allow it to use it, hope this helps.

Answer 2

Looks to me like what is actualy happening is that $('#textbox1') will not actually return any elements. That is because jQuery will look for an element with the exact ID textbox1, and ASP.NET by default generates dynamic IDs for elements.

So your <asp:TextBox ID="textbox1" ... /> will actually get rendered out as something like <input id="ctl00_someOtherDynamicStuff_textbox1" type="text"/> (note the ID).

One solution is to give your TextBox a class you can select it by: <asp:TextBox ID="textbox1" CssClass="someClassName" runat="server"/>

and then use that in your JS:

$('.someClassName').attr("placeholder", "enter some text");