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?

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

Solution 2

<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

Solution 3

Is this from the code-behind?

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

Comments

[Gagege]

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]

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

[Jason]

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

[Jason]

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

[Gagege]

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