Question

Ok, so I have a multiple ASP textboxes and ASP buttons on a page within a multiview.
The submit button associated with each textbox should be enabled only when there is text entered in the textbox. So, I wrote a Javascript function to handle this and I’m getting an error saying “document.getElementById(…)’ is null or not an object”

    function checkEmptyTxtBox(val, savebtn) {
        if (val.value.replace(/^\s+|\s+$/g, "") == "")
            document.getElementById(savebtn).disabled = true;
        else
            document.getElementById(savebtn).disabled = false;
    }

                   <asp:TextBox 
                    ID="txt_Comments_2" 
                    runat="server" 
                    Wrap="true" 
                    TextMode="MultiLine" 
                    onkeyup="checkEmptyTxtBox(this,'<%= btnSave2.ClientID %>')">
                 </asp:TextBox>

                 <asp:Button 
                    ID="btnSave2"
                    runat="server"
                    text="Save" 
                    Enabled="False"/>

This is on VS2010.

Answer 1

You cannot set an attribute of a Server Side Control using <%= %>. If you look at the rendered source, it looks like this:

 onkeyup="checkEmptyTxtBox(this,'<%= btnSave2.ClientID %>')"

It literally contains the <%= %>.

You could set the attribute on page load like this:

protected void Page_Load(object sender, EventArgs e)
{
    txt_Comments_2.Attributes["onkeyup"] = "checkEmptyTxtBox(this,'" + btnSave2.ClientID + "')";
}

EDIT:

As many will be willing to point out; this isn’t really the “best” way to do event registration in HTML. Rather, the JavaScript should bind to the keyup event by adding an event listener. For example, with jQuery it becomes:

$(document).ready(function() {
    $('#<%: txt_Comments_2.ClientID %>').keyup(function() {
        if ($(this).val().replace( /^\s+|\s+$/g , "") == "") {
            $('#<%: btnSave2.ClientID %>').attr('disabled', 'disabled');
        }
        else {
            $('#<%: btnSave2.ClientID %>').removeAttr('disabled');
        }
    });
});

And your ASP.NET markup looks like this:

<asp:TextBox 
    ID="txt_Comments_2" 
    runat="server" 
    Wrap="true" 
    TextMode="MultiLine" />

<asp:Button 
    ID="btnSave2"
    runat="server"
    text="Save" 
    Enabled="False"/>

This has the advantage of not cluttering your HTML with event registration. There are even other, perhaps cleaner ways of doing this with something like KnockoutJS.