Thursday, October 20, 2011

Submit Button Double Click

So I was running into an issue where a user was multiclicking a button on a webform. This hasn't caused problems in the past, but this form was submitting to a payment vendor, and with the delay was actually causing a double post.

Trying to think if a good way to disable the button on click, but still do the post back, I Googled around, found a solution, then modified it just a bit to work for my situation.

So on the page I have in the page directive, AutoEventWireup="true", and the element:


The OnClick event is defined as normal with:
protected void btnSubmit_Click(object o, EventArgs e)
{
//Code here
}

So I just added the method:
protected override void OnInit(EventArgs e)
{
this.btnSubmit.Attributes.Add("onclick", "javascript:" +
"document.getElementById('" + this.btnSubmit.ClientID + "').disabled=true;" +
this.GetPostBackEventReference(this.btnSubmit));

base.OnInit(e);
}

This add's the javascript to disable the button on click, and still causes the postback element to happen. Thus submitting the payment information to the third party payment processor, and prevents the user from multiclicking the button.

Well, I guess they can still multiclick it, it's just not going to do anything after the first click.

No comments:

Post a Comment