Disabling .NET Controls Via JavaScript

[Frinavale]

I've run into a bit of a problem concerning JavaScript and ASP.NET.

Upon page submission I disable all of my buttons and would also like to disable all of my inputs (Textboxes, DropDownLists, etc) as well. This will prevent multiple postbacks to the server while it's processing and keep the user from making changes during this time.

The problem is that when I use JavaScript to disable the input controls the values of these objects come back as nothing.

The JavaScript is quite simple:

function DisableAllInputs()
{   var i;
 
    var allInputElements=document.getElementsByTagName('input');
    var len=allInputElements.length;    
    for(i = 0; i < len; i++)
    {   
        var temp = allInputElements[i];     
        if(temp.type=="text")
        {   temp.disabled=true;
        }
    }
 
    var allDropDownLists=document.getElementsByTagName('select');
    var lenOfDDLs=allDropDownLists.length;
    for(i = 0; i < lenOfDDLs; i++)
    {   var temp = allDropDownLists[i];
         temp.disabled=true;
    }
}

Does anyone have an idea of why the values of the TextBoxes and DropDownLists are nothing when the page is posted back to the server and JavaScript has been used disabled these controls?

-Frinny

[Frinavale]

I found the solution to my problem.

The reason why the controls had a value of nothing upon posting back to the server was because when you use JavaScript to disable the control it is removed from the Request.Form collection.

To get around the problem I used a <div> to place a "sheild" over top of the page's content:

<div id="shield" style="display:none; position:absolute; top:0; left:0; height:100%; width:100%; background-color:black; filter:alpha(opacity=35); opacity:.35;">&nbsp;</div>
 
<div id="maincontent">
    <!-- the content of the page goes here-->
</div>
 

Now, when the page is submitted I call the following JavaScript function. It displays the "shield" over top of the entire page.

function DisplaySheild()
{
     document.getElementByID("sheild").style.display = 'block';
}

Note that the style of the "shield" <div> has "position:absolute", this is how the "shield" is displayed "on top" of the page content. Also note that I have the background colour of the "sheild" set and I am using opacity to allow the content under it to show through, you don't need to do this if you don't want to.

Hope this helps you!

-Frinny

[Frinavale]

Update: The <form> tag in asp.net has a property SubmitDisabledControls.

If you set: submitdisabledcontrols="True" then the controls disabled by the JavaScript code above will keep their values.

I'm sticking with my last solution because it disables link buttons etc. while the page is posting back.


Cheers!

-Frinny