JavaScript with ASP.NET tutorial

Disable ASP NET button after click to prevent double clicking

Link for all dot net and sql server video tutorial playlists
http://www.youtube.com/user/kudvenkat/playlists

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspot.com/2015/03/disable-aspnet-button-after-click-to.html

In this video we will discuss how to disable ASP.NET button after click to prevent double clicking. Preventing accidental double clicks on a submit button is very important for applications. If double clicks are not prevented you may end up executing the submit button code twice. This means if you are inserting data, duplicate rows may be inserted in the database table.

To disable the submit button after the first click, use OnClientClick and UseSubmitBehavior attributes of the Button control

[asp:Button ID=”btnSubmit” runat=”server” Text=”Submit” OnClick=”btnSubmit_Click”
UseSubmitBehavior=”false”
OnClientClick=”this.disabled=’true’; this.value=’Please wait…’;” /]

When the click event occurs, the JavaScript that is associated with the client click event disables the Submit button and displays “Please wait…” message. After the server has processed the request, the page will be reloaded in the client browser, and the Submit button becomes enabled.

Why should we set UseSubmitBehavior to false
When UseSubmitBehavior is set to false, ASP.NET injects client side script to postback the page to the server when click event occurs. With UseSubmitBehavior=”false”, when you view the page source, the following is the HTML that is generated.

[input id=”Button1″ type=”button” name=”btnSubmit” value=”Submit”
onclick=”this.disabled='true'; this.value='Please wait…';__doPostBack('btnSubmit','')” /]

Notice that __doPostBack() method is injected by ASP.NET. This is the method that causes the page to postback when you click the button. If you don’t set UseSubmitBehavior=”false” on the button, __doPostBack() method is not injected by ASP.NET. This means when you click the button the page will not be posted to the server. Here is the HTML that is generated without UseSubmitBehavior=”false”

[input id=”Submit1″ type=”submit” name=”btnSubmit” value=”Submit”
onclick=”this.disabled='true'; this.value='Please wait…';” /]

Disabling ASP.NET ImageButton to prevent double click

Include the following ImageButton declaration in the ASPX page
[asp:ImageButton ID=”ImageButton1″ runat=”server” ImageUrl=”Images/submit.png” OnClick=”ImageButton1_Click” /]

Copy and paste the following code in Page_Load() event in the code-behind file. GetPostBackEventReference() method generates __doPostBack() method that causes the postback to occur when the ImageButton is clicked.
protected void Page_Load(object sender, EventArgs e)
{
ImageButton1.Attributes.Add(“onclick”, “this.disabled = ‘true’;”
+ ClientScript.GetPostBackEventReference(ImageButton1, null)
+ “;this.src = ‘Images/wait.png’;” );
}