Retrieve value from asp:textbox with JQuery

Question

I have a few asp:textbox controls in a form on a webpage, below is a snippet. The first is a field where the recipient is entered, the other is a larger textarea where the recipients name should be loaded into, along with some other text.

<asp:TextBox name="recipient" ID="recipient" class="inputBox" onChange="addNames()" runat="server" />
<asp:TextBox TextMode="MultiLine" name="usermessage" ID="usermessage" class="usermessage" height="128" width="425px" runat="server"></asp:TextBox>

A standard message is loaded into this second textbox with use of JQuery with this code:

$(".usermessage").val("Hello etc");

This works nicely, the message is shown.
When a user enters the name of a recipient or his own name in one of the other textboxes, addNames() is triggered. This function adds the name of the recipient to the standard message in the usermessage box.

function addNames() {
    //update textbox
    var recipient = $(".recipient").val();
    var sender = $(".name").val();
    $(".usermessage").val("Hello " + recipient +", \nThis is a message. \n\rKind regards, \n" + sender);
    }

Problem is that the two variables recipient and sender are "undefined".

Hello undefined,
This is a message.

Kind regards,
undefined

Actual question: What is the correct code to retrieve the value from an asp:textbox if this

var recipient = $(".recipient").val();  

does not work?

The output in the html is as follows:

<input name="ctl00$contentPlaceHolderRightColumn$recipient" type="text" id="ctl00_contentPlaceHolderRightColumn_recipient" name="recipient" class="inputBox" onChange="addNames()" />

I'm using JQuery v1.3.2, with Firefox v3.5.3.

Answer 1

As far as I can tell doing

var recipient = $(".recipient")

Will select all dom elements with a CLASS of recipient. Your input box has a class of "inputBox".

You need to select by its ID using the #

So:

var recipient = $("#recipient")

But you are using ASP.NET controls, which give it a unique ID generated on the server so it's unique. (in your case it's ctl00_contentPlaceHolderRightColumn_recipient)

To select you will need to do

var recipient = $("#<%=recipient.ClientID%>")

-edited out some syntax errors

Answer 2

If you set the clientID of the asp textbox, you should be able to use that in JQuery in the same way as you have, but witha hash instead of the dot.

E.g.

ClientID = "recipient"

then

    var recipient = $('#recipient').innerHTML() 

or

    var recipient = $('#recipient').text()