I need to know how to prevent users from submit the form multiple times and disable the submit button after it's clicked in ASP.NET. Is it possible to add a loading animation after the button is disabled? I tried OnClientClick event to disable button but cancel the OnClick event that the page just post back without any changes. Any clue?
Add a comment
|
3 Answers
Try this:
protected void Page_Load(object sender, EventArgs e)
{
Page.ClientScript.RegisterOnSubmitStatement(GetType(), "ServerForm",
"if(this.submitted) return false; this.submitted = true;");
button.Attributes.Add("onclick", string.Format("this.value='wait...';
this.disabled=true; {0}", ClientScript.GetPostBackEventReference
(button, string.Empty)));
}
1 Comment
devXen
Tested. This is the most elegant solution.
A solution that I've used in the past is to create a new subclass of the System.Web.UI.WebControls.Button that uses Javascript to disable itself after it's been clicked. Note that you have to be careful to not overwrite the ASP.NET client-side validation code.
If you want to add a loading animation after the click, you can add client-side javascript to show a previously-hidden animation icon by tweaking validateAndDisableScript below.
//
// This is a Button-derived class that will disable itself when it is clicked,
// preventing multiple submits of forms where necessary.
//
public class OneShotButton : System.Web.UI.WebControls.Button
{
//
// Javascript that invokes client validation (if enabled), and disables
// the containing HTML element. This script doesn't do the postback, so
// that code has to be appended during OnPreRender.
//
private const string validateAndDisableScript =
@"if ( typeof(Page_ClientValidate) == 'function' )" +
@"{" +
@" if ( !Page_ClientValidate() ) { return false; }" +
@"}" +
@"this.disabled = true;"; // postback code follows
//
// Override OnPreRender to set Javascript associated with the onclick
// event for this button. Most of the Javascript is prebuilt, but we
// have to dynamically generate the postback code.
//
protected override void OnPreRender(System.EventArgs e)
{
string onClick = string.Format("{0}{1};",
validateAndDisableScript,
Page.ClientScript.GetPostBackEventReference(this, string.Empty)
);
Attributes.Add("onclick", onClick);
base.OnPreRender(e);
}
}
Comments
You need _endRequest, _beginRequest Handlers. In code behind add this.
public object endRequestHandle { get; set; }
public object beginRequestHandle { get; set; }
In your aspx page, add this:
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandle);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandle);
//Function gets called before Ajax request
function beginRequestHandle(sender, Args) {
$('#SubmitButton').attr("disabled", true);
$('#LoadingImage').css("visibility","visible");
}
//Function gets called after Ajax request completes
function endRequestHandle(sender, Args) {
$('#SubmitButton').attr("enabled", true);
$('#LoadingImage').css("visibility","invisible");
}
