W0ut's blog

Introduction.

A requirement that I regularly see in a website specification is: “Make sure the user can only click the button once and display a confirmation box.”.
The extra challenge in ASP.NET is not to lose the postback functionality. In this short post I show you how can disable a button on the client-side while keeping the ASP.NET postback functionality working. We will also add a confirmation box to the button.

Step1. Our sample button

Create a default ASP.NET button and add a (postback) function (btn_Click in our sample)

 1: <asp:Button ID="btn" runat="server" Text="Start"  onclick="btn_Click" />

Step2. Disable after first click.

Next step is to add some clientside code (JavaScript) to disable the button as soon as it get’s clicked.
We do this by adding a small piece of JavaScript to the ‘OnClientClick’ property

 1: <asp:Button ID="btn" runat="server" Text="Start"  
 2:     OnClientClick="this.disabled=true;this.value = 'Please wait ...';"

 3:     onclick="btn_Click" />

Step 3. Make sure the postback works.

As you might notice the previous step broke the postback functionality. When you click the button, the button is disabled by the JavaScript but the C# function “btn_Click()” is not triggered anymore. To solve this we need to add the “UseSubmitBehavior” property.

 1: <asp:Button ID="btn" runat="server" Text="Start"
 2:     UseSubmitBehavior="false"

 3:     OnClientClick="this.disabled=true;this.value = 'Please wait ...';" 
 4:     onclick="btn_Click" />

The “UseSubmitBehavior” will add the correct (clientside) PostBack function to your button. Now the button gets disabled and the “btn_Click()” function in our codebehind gets triggered again.

Step 4. Adding confirmation box.

Final thing we need to do is add the confirmation box. Again we do this by using JavaScript. This time we put it in font of the JavaScript already in place in the “OnClientClick” property. We add “if (!confirm(‘Certain??’)) return;”. It tests if the user confirms. If the user does not confirm the executing of the JavaScript stops and the disable and postback code never gets triggered.

 1: <asp:Button ID="btn" runat="server" Text="Start"
 2:     UseSubmitBehavior="false"

 3:     OnClientClick="if (!confirm('Certain??')) return; this.disabled=true;this.value = 'Please wait ...';"  
 4:     onclick="btn_Click" />

Hopefully it’s helpful.

Regards,
W

Read Full Post »