We help IT Professionals succeed at work.

Disable asp:Button to prevent double click

webressurs
webressurs used Ask the Experts™
on
When I click an asp:Button some data is stored in my databse. If I double click the button the data is stored twice in the database. I have tried many different solutions to prevent this, but no lock so far.

I don't know the best way to solve this, but mabye the button can be disabled by a javascript when the first click occures? Since I use asp:RegularExpressionValidator and ValidationGroup and need to handle this correct. The button should NOT be disabled if the validation failes (for this validation group called "Message").

Here is my code so far:

<asp:Button runat="server" ID="btnSendMessage" Text="Send" OnClick="btnSendMessage_OnClick" OnClientClick="this.disabled=Page_IsValid('Message');" CausesValidation="true" ValidationGroup="Message" />
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2011

Commented:
This is what I use:


At the head:

<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=85);
      -moz-opacity:0.85;
      padding-top: 20%;
   }

   .InnerFreezePane
   {
      text-align: center;
      width: 66%;
      background-color: #171;
      color: White;
      font-size: large;
      border: dashed 2px #111;
      padding: 9px;
   }
</style>
<script type="text/JavaScript">
    function FreezeScreen(msg) {
        scroll(0, 0);
        var outerPane = document.getElementById('FreezePane');
        var innerPane = document.getElementById('InnerFreezePane');
        if (outerPane) outerPane.className = 'FreezePaneOn';
        if (innerPane) innerPane.innerHTML = msg;
    }
</script>

Open in new window


Your button now looks like this:

<asp:Button runat="server" ID="btnSendMessage" Text="Send" OnClick="btnSendMessage_OnClick" OnClientClick="this.disabled=Page_IsValid('Message');FreezeScreen('Your Pledge is Being Processed...');" CausesValidation="true" ValidationGroup="Message" />

Open in new window


Finally, immediately after the code above, you add these:

<br /><div align="center" id="FreezePane" class="FreezePaneOff">
<br /><br />
<br /><br />
   <div id="InnerFreezePane" class="InnerFreezePane"> </div>
</div>
<br />

Open in new window


Now, you can prevent double-clicks
I just found this solution. It seems to work fine and is pretty simple to use.

<script language="javascript" type="text/javascript">
    function disableButton(sender,group)
    {
        Page_ClientValidate(group);
        if (Page_IsValid)
        {
            sender.disabled = "disabled";
            __doPostBack(sender.name, '');
        }
    }
</script>


<asp:Button runat="server" ID="btnSendMessage" Text="Send melding" OnClick="btnSendMessage_OnClick" OnClientClick="disableButton(this,'Message')" CausesValidation="true" ValidationGroup="Message" />

Author

Commented:
This works perfect.