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

your button is server side so the ID is changed when it is rendered. try removing runat="server" tag. You may also need to change other Tags like "Text, Enabled" etc. Basically you are now creating a HTML button and not ASP.Net button. — Asdfg
– Asdfg, Commented Jan 15, 2013 at 17:55

Babak Naffas · Accepted Answer · 2013-01-15 22:35:22Z

6

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

edited Jan 15, 2013 at 22:35

answered Jan 15, 2013 at 17:59

Babak Naffas

12.6k3 gold badges36 silver badges51 bronze badges

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

1 Comment

Babak Naffas Over a year ago

Do you see any errors on the console? You may be dealing with other issues that are blocking you.

psantiago · Accepted Answer · 2013-01-15 20:15:55Z

2

Instead of:

document.getElementById('button').disable = false;

You'll probably want:

document.getElementById('<%= this.button.ClientID %>').disabled = false;

edited Jan 15, 2013 at 20:15

answered Jan 15, 2013 at 17:58

psantiago

7246 silver badges17 bronze badges

1 Comment

psantiago Over a year ago

You need to use .disabled, not .disable

Collectives™ on Stack Overflow

Enable/Disable ASP.NET control with javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related