Multiple submit Button click problem?

Question

I have a form which inserts data in DB on Submit button click but the problem is when client click the button multiple times its sends multiple create requests means multiple button click events for the same time of same data, which must not be.

I tried to disable the button when client click the Submit button first time but after this it does not call server click event handler or not fire the server click event once it got disabled.

How to handle this multiple click problem..

I used the following code to disable the button

 <script type="text/javascript">
     function checkAuth(obj)
     {
         if(Page_ClientValidate("ValidationGroupName"))
            obj.disabled=true;      
     }
 </script>

        <asp:Button ID="btnSubmit" runat="server" Text="Submit" 
OnClick="btnSubmit_click" OnClientClick="checkAuth(this)" CssClass="FormButton" 
ValidationGroup="ValidationGroupName" />

Answer 1

All you have to do is have some client side javascript which disables the button. Something similar to:

document.myform.mybutton.disabled  = true;

If you wrap this in a function, and set the onClientClick attribute of your button to fire this. As soon as it gets clicked it is disabled - but still generates the request to the server.

The reason the event didnt fire the way you suggested above is likely because you disabled server side (not client side as is here)

Answer 2

Include a unique id in a <input type="hidden"> field. Then on the server check if the request has already been processed.

As an ID you can generate a GUID. Then you just need some structure to collect currently valid IDs. For example a Dictionary. Then from time to time you can clear old IDs out of the structure, and of course remove it when it is used.

Answer 3

Do not disable the button, just prevent the second submit.

this little script does the job but it assumes there is a postback at a certain moment.

var formhandler = function() {
   var submit, isSubmit = false;
   submit = function(){
                // flop and return false once by the use of operator order.
    return isSubmit != (isSubmit = true);
    };
    return {
       submit: submit
    };
}(); // <-- use direct invcation to keep the internal variables "static"

attach it by :

   document.forms[0].onsubmit = formhandler.submit;    

or

   OnClientClick = "formhandler.submit()";