使用 ClientID 从文本框中获取值不适用于 JavaScript

Using ClientID to get value from textbox does not work with JavaScript

提问by Junco

I have seen a few examples about how to get the value from a textbox with JavaScript when the control is on a page that uses a MasterPage. But, it is not working for me.

我已经看到了一些关于如何在控件位于使用 MasterPage 的页面上时使用 JavaScript 从文本框中获取值的示例。但是，它对我不起作用。

Here is my JavaScript code:

这是我的 JavaScript 代码：

function changeRedTextToBlackMasterPage()
{
// Get the value for the textboxes:
var userNameEntry = document.getElementById('<%= UserName_tbx.ClientID %>').value;

NOTE: The function is in a separate JavaScript file.

注意：该函数位于单独的 JavaScript 文件中。

Here is the page source:

下面是页面源码：

<input name="ctl00$ContentsPlaceHolder1$UserName_tbx" type="text" value="ww" maxlength="20" id="ctl00_ContentsPlaceHolder1_UserName_tbx" onblur="changeRedTextToBlackMasterPage()" style="width:150px;" />

Here is the error I am getting:

这是我得到的错误：

SCRIPT5007: Unable to get value of the property 'value': object is null or undefined

SCRIPT5007：无法获取属性“值”的值：对象为空或未定义

If I use the ID in the generated page in the JavaScript function, the code works.

如果我在 JavaScript 函数中使用生成的页面中的 ID，则代码有效。

var userNameEntry = document.getElementById('ctl00_ContentsPlaceHolder1_UserName_tbx').value;

So, why didn't using the ClientID work in this case? The textbox is in a table. But, I don't think that would make a difference. (Did I make a typo in the code that I am not seeing? I tried copying/pasting the examples into my code to compare them.)

那么，为什么在这种情况下使用 ClientID 不起作用？文本框位于表格中。但是，我认为这不会有什么不同。（我是否在我没有看到的代码中打错了字？我尝试将示例复制/粘贴到我的代码中以进行比较。）

Here is the rest of the code from the page up to the point where the textbox is defined:

以下是从页面到文本框定义点的其余代码：

<%@ Page Language="C#" MasterPageFile="~/RaptorNestSurveyMaster01.master" AutoEventWireup="true" CodeFile="EditUserInformation.aspx.cs" Inherits="EditUserInformation" Title="Edit User Information Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentsPlaceHolder1" Runat="Server">

<div>
<asp:label ID="PageTitle_lbl" runat="server" CssClass="pageTitle" text="Edit User Information Page" />
<br /> <br /> <br /> 
  <table>
    <tr>
       <td>
         <asp:Label ID="UserName_lbl" runat="server" Text="User Name:"></asp:Label> 
       </td>
       <td style="width: 745px">
         <asp:TextBox ID="UserName_tbx" runat="server" MaxLength="20" Width="150" onblur="changeRedTextToBlackMasterPage()" ></asp:TextBox>&nbsp;
         <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="UserName_tbx" ErrorMessage="User Name is required."></asp:RequiredFieldValidator>
         <asp:Label ID="UserNameErrorMessage_lbl" runat="server" ForeColor="Red" Text="" Visible="false"></asp:Label>
       </td> 
     </tr>    

回答by Traze

The call to the javascript method changeRedTextToBlackMasterPage()must be placed after the text control is declared in the aspx file. The actual method, however, can be written before or after. Please note, your issue is not related to existence of master page.

对 javascript 方法的调用changeRedTextToBlackMasterPage()必须放在 aspx 文件中声明文本控件之后。然而，实际的方法可以写在之前或之后。请注意，您的问题与母版页的存在无关。

Please look at the following snippet that works:

请查看以下有效的代码片段：

<script type="text/javascript">
    function changeRedTextToBlackMasterPage() {
        // Get the value for the textboxes:
        var userNameEntry = document.getElementById('<%= UserName_tbx.ClientID %>').value;
        alert(userNameEntry);
    }
</script>

<div>
    <table>
        <tr>
           <td>
             <asp:Label ID="UserName_lbl" runat="server" Text="User Name:"></asp:Label> 
           </td>
           <td style="width: 745px">
             <asp:TextBox ID="UserName_tbx" runat="server" MaxLength="20" Width="150" onblur="changeRedTextToBlackMasterPage()" >pop</asp:TextBox>&nbsp;
             <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="UserName_tbx" ErrorMessage="User Name is required."></asp:RequiredFieldValidator>
             <asp:Label ID="UserNameErrorMessage_lbl" runat="server" ForeColor="Red" Text="" Visible="false"></asp:Label>
           </td> 
         </tr>    
    </table>
</div>

<script type="text/javascript">
    changeRedTextToBlackMasterPage();
</script>

It's one of the most common pitfall using JavaScript. If you are already using JQuery, consider calling the startup routing inside document's ready event. That ensures that the code is run after the complete document has been loaded in the browser. e.g.

这是使用 JavaScript 最常见的陷阱之一。如果您已经在使用 JQuery，请考虑在文档的就绪事件中调用启动路由。这可确保在浏览器中加载完整文档后运行代码。例如

<script type="text/javascript">
    $(document).ready(function () {
        changeRedTextToBlackMasterPage();
    });

    function changeRedTextToBlackMasterPage() {
        // Get the value for the textboxes:
        var userNameEntry = document.getElementById('<%= UserName_tbx.ClientID %>').value;
        alert(userNameEntry);
    }
</script>

<div>
    <table>
        <tr>
           <td>
             <asp:Label ID="UserName_lbl" runat="server" Text="User Name:"></asp:Label> 
           </td>
           <td style="width: 745px">
             <asp:TextBox ID="UserName_tbx" runat="server" MaxLength="20" Width="150" onblur="changeRedTextToBlackMasterPage()" >pop</asp:TextBox>&nbsp;
             <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="UserName_tbx" ErrorMessage="User Name is required."></asp:RequiredFieldValidator>
             <asp:Label ID="UserNameErrorMessage_lbl" runat="server" ForeColor="Red" Text="" Visible="false"></asp:Label>
           </td> 
         </tr>    
    </table>
</div>