Passing ASP.NET client IDs in to a javascript function

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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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>

Method 2

Is this from the code-behind?

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

Method 3

<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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0