How to prevent double submit with jQuery in ASP.NET app with UpdatePanels

Question

I have an Intranet ASP.NET application which is sometimes slow to respond. My requirement is to prevent double submit, and ideally provide feedback to the user that the for

Answer 1

You place an allow/not allow to submit form base on a flag, as:

Page.Form.Attributes["onsubmit"] = "return fAllowToSubmit();";

and you open close the flag for the submit when you send via updatepanel and wait for return.

 <script type="text/javascript"> 
    var _fAllowToSubmit = true;
    // here you can throw and an alert() when _fAllowToSubmit==false
    function fAllowToSubmit() 
     {
        if(!_fAllowToSubmit)
          alert("Please wait for the page to be updated");

       return _fAllowToSubmit;
     }

    // to avoid calling it before the Sys loaded
    jQuery(document).ready(function() {
      var prm = Sys.WebForms.PageRequestManager.getInstance();    
       prm.add_initializeRequest(InitializeRequest);
       prm.add_endRequest(EndRequest);
    });

    function InitializeRequest(sender, args) {
       _fAllowToSubmit = false;
       // to make it even nicer you can place here a fade css class
       // it will auto-clear with the next update.
       jQuery("#YourWarpDiv").addClass("FadedDiv");
    }

    function EndRequest(sender, args) {
        _fAllowToSubmit = true;
    }
</script>

and the

.FadedDiv
{
    background-color: white;
    filter:alpha(opacity=50);
    opacity: 0.5;
    -moz-opacity:0.50;
}

Of course you have also the "please wait" message that can open automatically with the update panel.