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() 

Answer 3

Through this you can also get asp button or any control for that matter.

var txt_recipient = document.querySelector("input[id*='recipient']");
alert(txt_recipient.Value);

you can also try querySelectorAll() if you have multiple controls with same id in client side.

jQuery Equalent is

$("input[id*='recipient']").val()

Answer 4

I think that jQuery selector returns you a list of objects. Have you tried:

var recipient = $(".recipient")[0].val();

UPDATE

What about this then:

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

It has a nice advantage as well - will brake on the first match.

Answer 5

i guess the asp.net HTML controls must have ClientID="recipient" property to access the control using client id in client side. or i have no idea!

<asp:TextBox ID="recipient" ClientID="recipient" runat="server" name="recipient" class="inputBox" onChange="addNames()" />

try it this should work.

Answer 6

IN ASP.NET, you will need to write in this way:

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

In MVC, then you can write in this way:

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