How to get client id value of a ASP.NET control via javascript in JS file?

Question

0.00/5 (No votes)

See more:

How to get client id value of a asp.net control via JavaScript in JS file in content page and the JS file is referred from the same page.
I am working in .net framework 3.5. I am fetching the client id value as below
document.getElementById('<%=txtDDAExpiryDate.ClientID%>').value;. I am getting below exception
Uncaught TypeError: Cannot read properties of null (reading 'value')

What I have tried:

Code as below

document.getElementById('<%=txtDDAExpiryDate.ClientID%>').value;

Posted 12-Feb-24 23:43pm

Member 7513082

Updated 12-Feb-24 23:44pm

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

OriginalGriff · Answer 1 · 2024-02-13T00:40:00

Solution 1

Always start by reading the documentation: Document: getElementById() method - Web APIs | MDN[^] - it's pretty clear that it returns a null when the element with that ID doesn't exist:

Quote:
An Element object describing the DOM element object matching the specified ID, or null if no matching element was found in the document.

So now you need to know what - exactly - txtDDAExpiryDate.ClientID is returning from the server, then try to match that manually against your HTML.
That'll tell you where the problem is: Server side or Client side.
And when you know that, you should be able to solve it.

Use the debugger (or just write it on the page) to find out.

Sorry, but we can't do that for you - time for you to learn a new (and very, very useful) skill: debugging!

Posted 13-Feb-24 0:40am

OriginalGriff

Comments

Member 7513082 13-Feb-24 8:03am

Issue is client side itself
with below
document.getElementById('ctl00_cphDDS_ddlBankType').value; it works in JS file
but with this document.getElementById('<%=ddlBankType.ClientID %>').value i get null exception in JS file

OriginalGriff 13-Feb-24 8:24am

How do you know that?
What have you done to prove that, or did you just assume a client side error because it was the browser that reported it?

Think about it: if the Server side returned "Hello World!" what would the browser do?

Member 7513082 13-Feb-24 8:33am

if I fetch control id value using document.getElementById('<%=ddlBankType.ClientID %>').value in aspx content page it works . but if i try to access the same control same way in JS file it gives null exception. if i hardcode the control id value as below in external js it works
document.getElementById('ctl00_cphDDS_ddlBankType').value;
How can get the control id value in external js file without hardcoding via javascript

Richard Deeming · Answer 2 · 2024-02-13T03:34:00

Because IDs in an HTML document are supposed to be unique, WebForms "mangles" the ID of any server-side control by combining it with the ID of every "naming container" in its hierarchy.

If you can move to .NET 4.x, then you may be able to use the ClientIDMode property[^] to override that behaviour.

Otherwise, you'll need to find another way to identify your element. For example:

JavaScript

document.querySelector("*[id$='_txtDDAExpiryDate']")

Document: querySelector() method - Web APIs | MDN[^]