Skip to Content

One problem of webpages is, that user sometimes doubleclick the submit button and you get two requests. Ofcourse it is possible to check this on the server. In this weblog I describe a very easy solution on the client, written in javascript.

The idea of this solution is to hide the submit button direct after clicking it the first time. Instead of the submit button, that disapears after clicking it, a wait-button appears, that is disabled to click.

To be honest, this is not really about BSP, but the idea of this solution came after analysing the html-code using a htmlb-tabStrip or htmlb-tray. Thanks to SAP 🙂

image

If you copy the code in a bsp-application to test it, it could be helpful to wait a few seconds in the OnInputProcessing (wait up to 3 seconds) to make it more clear, how it works. Espessially if your WAS is very fast 🙂

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. Thomas Jung
    Of course you could use the SAP XHTMLB tag protectDoubleSubmit.  This popups up a “please wait” message and makes all fields/buttons no longer open for input. 
    (0) 
    1. Renald Wittwer Post author
      That is right, thank you very much Thomas! If you are using HTMLB it is probably the better solution to use the SAP XHTMLB tag. I have used the javascript in some “pure” html-pages.
      (0) 
  2. Brian McKellar

    Not always does a weblog have to discuss cutting-edge technology. Often it is good to relook at existing technology; either to see alternatives or plain to learn how it was done. Reverse engineering is probably the best teacher there is!<br/><br/>As Thomas has said, we already have the <xhtmlb:protectDoubleSubmit> tag to solve this problem. But even that took us some time to get (nearly) right. And this weblog reflects the first ideas that we also experimented with. Probably describing the how and why of the our approach would be to much for even one weblog (although I am still waiting for someone to do it!). So let us look at the first steps taken, and the problems we then encountered. This is not to discourage, but to encourage to actually understand the full scale of the problem.<br/><br/>Form usability aspect, I am not really sure having a disabled Wait button has the correct message. What does a Wait button do when enabled? Would have used the technique exactly like you do, with the onClientClick, but just disabled the Submit button. This has the benefit of giving the user active feedback that the button was actually pressed (something that I usually miss on web sites), and the message is clear: submitting the form again is not going to work.<br/><br/>Problems you now face and ideas to continue:<br/><br/>- It is not sufficient to only disable the button. If there are any other active elements on screen (links, other buttons, server side toggle tabstrips, etc), you have to effectively disable them as well. Otherwise the user just clicks something else, messing up the logic. How did we solve this problem? In the end, the simplest solution we found was with a transparent image we put over the screen, which then receives all the clicks.<br/><br/>- When you submit the form youself, you bypass and break the complete HTMLB event mechanism. You will have to hook into the HTMLB event library, so that you know when a form will be submitted. If anyone should feel like blogging about this idea (it is a complex trick we used), write me an email for the details.<br/><br/>The best way to learn is to build it yourself, and the best way to teach is to write about it! So keep learning and teaching.<br/><br/>brian<br/>

    (0) 

Leave a Reply