Retrieve value from asp:textbox with JQuery
<p>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.</p>

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

<p>A standard message is loaded into this second textbox with use of JQuery with this code:</p>

<pre><code>$(".usermessage").val("Hello etc");
</code></pre>

<p>This works nicely, the message is shown.<br />
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.</p>

<pre><code>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);
    }
</code></pre>

<p>Problem is that the two variables <em>recipient</em> and <em>sender</em> are "undefined".</p>

<blockquote>
  <p>Hello undefined,<br />
  This is a message.</p>
  
  <p>Kind regards,<br />
  undefined</p>
</blockquote>

<p><br /><br /><br />
Actual question: What is the correct code to retrieve the value from an asp:textbox if this  </p>

<pre><code>var recipient = $(".recipient").val();
</code></pre>

<p>does not work?</p>

<p>The output in the html is as follows:</p>

<pre><code>&lt;input name="ctl00$contentPlaceHolderRightColumn$recipient" type="text" id="ctl00_contentPlaceHolderRightColumn_recipient" name="recipient" class="inputBox" onChange="addNames()" /&gt;
</code></pre>

<p>I'm using JQuery v1.3.2, with Firefox v3.5.3.</p>
