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

Question

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

What do you have in your generated changeRedTextToBlackMasterPage? — GôTô
– GôTô, Commented May 14, 2014 at 15:23
what does the page source show as the elementId for the TextBox?> — T McKeown
– T McKeown, Commented May 14, 2014 at 15:27
@TMcKeown that was actually my first comment (what the page source for the function is) — GôTô
– GôTô, Commented May 14, 2014 at 15:36

Liam · Accepted Answer · 2014-05-14 16:22:13Z

3

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

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

edited May 14, 2014 at 16:22

Liam

30k28 gold badges143 silver badges206 bronze badges

answered May 14, 2014 at 16:14

Traze

1808 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Junco Over a year ago

Yes - I understand that the textbox must exist before the JavaScript can find it. But, the JavaScript code found it when I used the literal longer ID and not the ClietID.

Junco Over a year ago

Is the problem that I am using the ClientID in a separate JavaScript file?

Traze Over a year ago

"..ClientID in a separate JavaScript file..". Are you generating the JS file at runtime? I don't think that <% %> statements could be placed inside a .js file. Could you please mention the file names where your code blocks are?

Junco Over a year ago

Solo Traze: You are correct. When I put the JavaScript function on the bottom of the page, the ClientID worked. I didn't realize that using a separate JS file was relevant. I will add that to my question. Thanks.

Traze Over a year ago

I am happy that my suggestion helped. For your future reference, please note that <% %> blocks are only allowed inside .aspx files. These .aspx files are parsed at the server end when generating the page source. Most file types (.html, .js, .css etc...) are returned without any processing. So, when '<%= UserName_tbx.ClientID %>' was returned as part of .js file to the browser, it was unexpected and causing error or was ignored.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related