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.

Here is my JavaScript code:

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.

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

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

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 pare them.)

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>    

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.

Here is my JavaScript code:

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.

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

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

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 pare them.)

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>    

• javascript
• asp

• What do you have in your generated changeRedTextToBlackMasterPage? – GôTô Commented May 14, 2014 at 15:23
• what does the page source show as the elementId for the TextBox?> – T McKeown Commented May 14, 2014 at 15:27
• @TMcKeown rt.hawk included it as the second code portion – GôTô Commented May 14, 2014 at 15:29
• 1 @TMcKeown that was actually my first ment (what the page source for the function is) – GôTô Commented May 14, 2014 at 15:36
• 1 that seems to be what we are waiting on.. @rt.Hawk????? – T McKeown Commented May 14, 2014 at 15:37

1 Answer 1

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.

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 mon 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 plete document has been loaded in the browser. e.g.

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