Disabling Submitting Control in ASP.Net

If you want to disable the control triggering form submission in ASP.Net, two modes need to be distinguished.

If you use AjaxControlToolkit and the control is placed inside an UpdatePanel, you need to hook into the ScriptManager’s BeginRequest and EndRequest events, as shown in this blog post.

If the form uses the standard HTML Post functionality, you may think about disabling the triggering control in the onsubmit event of the form. However, a disabled button cannot submit a form in ASP.Net, even if it is disabled only in the onsubmit event handler.

I found this article describing the problem and the solution is to have a <div> which is initially invisible, and will be displayed in front of the form on submitting by setting its z-index and opacity.

In my solution, however, I chose not to set a fixed opacity for the hiding div (and thus instantaneously dimming the input form), but rather slowly increase the opacity in a timer.

Based on the original article, here is my solution:

<style type="text/css" >
.FreezePaneOff
{
      visibility: hidden;
      display: none;
      position: absolute;
      top: -100px;
      left: -100px;
}

.FreezePaneOn
{
      position: absolute;
      top: 0px;
      left: 0px;
      visibility: visible;
      display: block;
      width: 100%;
      height: 100%;
      background-color: #666;
      z-index: 999;
      filter:alpha(opacity=0);
      opacity:0.0;
      padding-top: 20%;

      font-size: 48px;
      font-weight: bold;
      text-align: center;
}
</style>

<script type="text/javascript">
    var oldSubmit = theForm.onsubmit;
    var opac = 0.0;

    function NewSubmit() {
        var o = true;
        if (oldSubmit) {
            o = oldSubmit();
        }
        if (o) {
            document.getElementById('freeze').className = "FreezePaneOn";
            setTimeout("fadeout()", 100);
        }
        return o;
    }

    function fadeout() {
        opac += 1.0;
        if (opac >= 70)
            return;

        var f = document.getElementById('freeze');
        f.style.opacity = opac / 100.0;
        f.style.filter = "alpha(opacity=" + opac + ")";

        setTimeout("fadeout()", 100);
    }

    theForm.onsubmit = NewSubmit;
</script>