I have a single asp:textbox declared as follows:

<asp:TextBox ID="textBox1" class="myTB" runat="server" TextMode="MultiLine" 
Font-Names="Calibri" Font-Size="Small" Font-Bold="True" Height="175px" 
Width="725px" BorderColor="#76B900" BorderStyle="Solid" BorderWidth="2px" 
Style="overflow: hidden; margin: 5px;"></asp:TextBox>

Rendered it looks like this:

<textarea name="ctl00$ctl00$ctl00$AllContent$MainContent$MainContent$textBox1" 
class="myTB" 
id="ctl00_ctl00_ctl00_AllContent_MainContent_MainContent_textBox1" 
style="border-bottom: #76b900 2px solid; border-left: #76b900 2px solid; 
margin: 5px; width: 725px; font-family: Calibri; height: 175px; 
font-size: small; overflow: hidden; border-top: #76b900 2px solid; 
font-weight: bold; border-right: #76b900 2px solid;" 
rows="2" cols="20"></textarea>

I have tried the following JQuery and JS respectively and in either case, the content of the text-area never changes even though the value does when I look at it with the debugger

function generateQuery() {
    var textBox = $(".myTB");
    textBox.value = "jquery woohoo";
}

AND

function _generateQuery() {
    var textBox = document.getElementsByTagName("textarea");
    textBox.value =" work for crying out loud ";
                }

And yes, it's the only textbox of that class on my page.

I have a single asp:textbox declared as follows:

<asp:TextBox ID="textBox1" class="myTB" runat="server" TextMode="MultiLine" 
Font-Names="Calibri" Font-Size="Small" Font-Bold="True" Height="175px" 
Width="725px" BorderColor="#76B900" BorderStyle="Solid" BorderWidth="2px" 
Style="overflow: hidden; margin: 5px;"></asp:TextBox>

Rendered it looks like this:

<textarea name="ctl00$ctl00$ctl00$AllContent$MainContent$MainContent$textBox1" 
class="myTB" 
id="ctl00_ctl00_ctl00_AllContent_MainContent_MainContent_textBox1" 
style="border-bottom: #76b900 2px solid; border-left: #76b900 2px solid; 
margin: 5px; width: 725px; font-family: Calibri; height: 175px; 
font-size: small; overflow: hidden; border-top: #76b900 2px solid; 
font-weight: bold; border-right: #76b900 2px solid;" 
rows="2" cols="20"></textarea>

I have tried the following JQuery and JS respectively and in either case, the content of the text-area never changes even though the value does when I look at it with the debugger

function generateQuery() {
    var textBox = $(".myTB");
    textBox.value = "jquery woohoo";
}

AND

function _generateQuery() {
    var textBox = document.getElementsByTagName("textarea");
    textBox.value =" work for crying out loud ";
                }

And yes, it's the only textbox of that class on my page.

• asp
• javascript
• jquery

• Did you accidentally leave out the closing tag for the textrea during the copy/paste to the question or did it not render? – Marc Commented Aug 13, 2009 at 20:52

2 Answers 2

Try:

var textBox = $(".myTB");
textbox.val("jquery woohoo");

FYI, this won't work

function _generateQuery() {
        var textBox = document.getElementsByTagName("textarea");
        textBox.value =" work for crying out loud ";
}

document.getElementsByTagName returns an array of elements, so if anything this would look something like this:

function _generateQuery() {
        var textBox = document.getElementsByTagName("textarea")[0];
        textBox.value =" work for crying out loud ";
}

Anyways this isn't the best way to get a reference to a textarea. Use the jQuery way or pass the clientID of your textbox to your method so you can get the reference to the textarea via the ASP.NET generated element ID.