Best way of solving multiple click on button

Question

Multiple click on button on browser, sends multiple request to server.

The easiest way to solve it is to stop multiple click on browser by JavaScript.

Can anybody suggest what could be better way to solve it?

For easiness i'll give litter design overview

BROWSER ---to---> WEB[all controllers] ----to-->rest call to service.

Adding More information: Note: we are sending CSRF token

Step 1: we are on /page/show - GET

Step 2: we Post the form /page/show -POST [srf token included in it]

Step 3: ON-SUCCESSFUL completion of save we redirect again to /page/show

Thanks

refer http://stackoverflow.com/questions/4614052/how-to-prevent-multiple-form-submission-on-multiple-clicks-in-php — Vinod VT, Jul 23 '13 at 07:17

Anand · Answer 1 · 2013-07-23T09:14:59.067

0

There are 2 ways you can solve this

why not when the button is clicked disable the button and show some loading gif. Loading gif is very important to inform the user something is happening.
If you want that after the button click user should not be able to interact with the page at all then create a div with background color as grey with some opacity so that user is able to see the page behind and increase its z index so that its on top and thus stops user from interacting with the page. (You can also add loading gif icon in side div using same technique)

if you want to take second approach, here is small example to get you going

css for the div

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 10000;
}

//function to show overlay
function ShowOverLay(){
   var overlay = $('<div id="overlay"> </div>');
   overlay.appendTo(document.body)
}

//function to hide overlay
function DeleteOverLay(){
   $('.overlay').remove();
}

//function to get data
function GetData(){
   //at first show the overlay
   ShowOverLay()

   //now make an ajax call
   $.ajax({
   url: url,
   data: data,
   success: function(data){
     if(data){
       //some processing with data if successfull
       //hide the overlay now
       DeleteOverLay();
     }
   },
   dataType: dataType
  });
}

edited Jul 23 '13 at 09:14

answered Jul 23 '13 at 09:09

Anand

14,545
8
32
44

Anand Thanks for your view , but As i said earlier too i am repeating again i don't want to do it with javascript. Any thing i can do at server side make sure that no request is duplicate. – Zuned Ahmed Jul 23 '13 at 09:43
Can I ask why you want to do it on server ? In essence you are breaking the restfulness of your service because now your service will contain some logic to identify whether the request originated from the same client. The server should have no knowledge about the client's state – Anand Jul 23 '13 at 09:46
NO i didn't said i want to do it from service code. There should be some filter or interceptor to do this request. i Thought CSRF filter should work but dont know why it is not working. – Zuned Ahmed Jul 23 '13 at 09:50
Ideally browser should not send request untill it get response back. – Zuned Ahmed Jul 23 '13 at 09:52
the client is controlled by user and its not autonomous. The biggest frustration for the user would be not to know the feedback when you click some thing on web page. That's the number 1 reason for the user to click some thing multiple number of times. – Anand Jul 23 '13 at 09:56

Best way of solving multiple click on button

1 Answers1