C# 使用 JQuery 从 asp:textbox 检索值

Retrieve value from asp:textbox with JQuery

提问by Kablam

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 控件，下面是一个片段。第一个是输入收件人的字段，另一个是一个较大的文本区域，应将收件人姓名以及一些其他文本加载到其中。

<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:

使用带有以下代码的 JQuery 将标准消息加载到第二个文本框中：

$(".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.

这很好用，显示了消息。
当用户在其他文本框中输入收件人姓名或他自己的姓名时，将触发 addNames()。此函数将收件人的姓名添加到用户消息框中的标准消息中。

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 recipientand senderare "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

实际问题：从 asp:textbox 中检索值的正确代码是什么？

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

does not work?

不起作用？

The output in the html is as follows:

html中的输出如下：

<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.

我正在使用 JQuery v1.3.2 和 Firefox v3.5.3。

采纳答案by qui

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".

将选择接收者 CLASS 的所有 dom 元素。您的输入框有一个“inputBox”类。

You need to select by its ID using the #

您需要使用 # 通过其 ID 进行选择

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)

但是您使用的是 ASP.NET 控件，它赋予它在服务器上生成的唯一 ID，因此它是唯一的。（在您的情况下，它是 ctl00_contentPlaceHolderRightColumn_recipient）

To select you will need to do

要选择你需要做的

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

-edited out some syntax errors

- 编辑了一些语法错误

回答by Audrius

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

我认为 jQuery 选择器会返回一个对象列表。你有没有尝试过：

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

UPDATE

更新

What about this then:

那么这个呢：

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

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

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

它也有一个很好的优势 - 会在第一场比赛中刹车。

回答by Jimmeh

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.

如果您设置了 asp 文本框的 clientID，您应该能够以与您相同的方式在 JQuery 中使用它，但使用哈希而不是点。

E.g.

例如

ClientID = "recipient"

then

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

or

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

回答by Mnemo

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

在 ASP.NET 中，你需要这样写：

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

In MVC, then you can write in this way:

在MVC中，那么你可以这样写：

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

回答by Hardy

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.net HTML 控件必须具有 ClientID="recipient" 属性才能在客户端使用客户端 ID 访问控件。或者我不知道！

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

try it this should work.

试试吧，这应该有效。

回答by George Livingston

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

通过这种方式，您还可以获得 asp 按钮或与此相关的任何控件。

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.

querySelectorAll()如果您在客户端有多个具有相同 ID 的控件，您也可以尝试。

jQuery Equalent is

jQuery 相等是

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