Passing ASP.NET client IDs in to a javascript function

Question

I need to pass a client ID to a Javascript function in the onblur event of an ASP.net control event like this:

OnBlur="javascript:setBackground(this, '<%= txtClientName.ClientID %>')"

Here is my Javascript function:

function setBackground(sender, controlID) {
        sender.style.backgroundColor = "#ffffff";
        var nextElement = document.getElementById(controlID);
        if ((nextElement.value == '' || nextElement.value == 'Select') && tab == true) {
            nextElement.style.backgroundColor = "#f7C059"
            tab = false;
        }
    }

The problem is that the client ID gets passed in literally as '<%= txtClientName.ClientID %>' instead of the actual value. So, calling document.getElementById(controlID); doesn't work.

How can I get the actual client ID and pass it to my Javascript function?

Community · Accepted Answer · 2017-05-23 11:51:37Z

7

You could either change the asp.net control to standard html element (i.e., without runat="server")

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<input type="text" id="ClientText1" onblur="javascript:alert('<%= TextBox1.ClientID %>')" />

or see this Stack Overflow answer:

problem assigning declarative values in asp:hyperlink. error: this is not scriptlet. will output as plain text

or use jquery

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"> </script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#text2").blur(function(){alert('<%= TextBox1.ClientID %>')});
        });
    </script>

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Jun 14, 2011 at 15:04

Jason

5,0573 gold badges36 silver badges41 bronze badges

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

5 Comments

Gagege Over a year ago

For the first answer, I don't really have that option. I need to get at these controls from the code behind. Also, using the "<%# %>" gives me the exact same result.

Jason Over a year ago

Understood. And then does the <%# ... %> syntax do it for you?

Jason Over a year ago

@Gagege no worries... jquery an option? (Added to answer)

Jason Over a year ago

Incidentally, if you use jquery, you could probably replace the setBackground function with something a little more concise.

Gagege Over a year ago

Once again, jQuery to the rescue. :) Thanks!

George Duckett · Accepted Answer · 2011-06-14 14:54:43Z

1

Is this from the code-behind?

How about OnBlur=String.Format("javascript:setBackground(this, '{0}')", txtClientName.ClientID);

answered Jun 14, 2011 at 14:54

George Duckett

32.6k12 gold badges101 silver badges167 bronze badges

Comments

Tala · Accepted Answer · 2013-08-29 08:09:15Z

1

<asp:TextBox ID="TextBox1" runat="server" onclick="dosomething(this)"></asp:TextBox>

<script>
function dosomething(obj)
{
   var txtObj= document.getElementById(obj.id);
alert (txtObj);
}
</script>

pass this object from the function and can get this.id from javascript that will be ClientID

edited Aug 29, 2013 at 8:09

Tala

8,9685 gold badges36 silver badges38 bronze badges

answered Aug 29, 2013 at 7:49

nadeem

111 bronze badge

Collectives™ on Stack Overflow

Passing ASP.NET client IDs in to a javascript function

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related