Enable/Disable ASP.NET control with javascript

Question

I'm building a page to upload an Excel file on the server for an import operation. So a found a javascript to check the file selected file extension void other file types. Now I'm trying to enable the upload ASP.NET button but javascript returns the error document.getElementById(...) is null.

Here the code:

<script type="text/javascript" language="javascript" defer="defer">
    function enableControl() {
        document.getElementById('button').disable = false;
    }

    function disableControl() {
        document.getElementById('button').disable = true;
    }

    function checkExcelFileUpload(elem) {
        var filePath = elem.value;
        if (filePath.indexOf('.') == -1)
            return false;
        var validExtensions = new Array();
        var ext = filePath.substring(filePath.lastIndexOf('.') + 1).toLowerCase();
        //Add valid extentions in this array
        validExtensions[0] = 'xls';
        //validExtensions[1] = 'pdf';
        for (var i = 0; i < validExtensions.length; i++) {
            if (ext == validExtensions[i])
                return true;
        }
        elem.value = '';
        alert('Sono ammessi solo file di Excel 97-2003');
        return false;
    }
</script>
<asp:FileUpload ID="fileupload" runat="server" size="50" onchange="javascript:try{if(checkExcelFileUpload(this) == true){enableControl();}else{disableControl();}}catch(err){alert(err);};" />
<asp:Button ID="button" runat="server" Text="Upload" Enabled="False" />

I serached on internet and I found other syntax for getElementById but I still have this problem. Can you help me?

Thank you

Answer 1

Option 1 Since your button is a server side control, the rendered ID will be different that what you have specified. Use the following code to generate the ctl$body$button (something along these lines depending on the nesting of your controls).

document.getElementById('<%= button.ClientID %>')

Option 2 If you are using ASP.NET 4, you can use the Static client ID mode.

<asp:Button ID="button" runat="server" ClientIDMode="Static" Text="Upload" Enabled="False" />

See http://weblogs.asp.net/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series.aspx