Solved

Disable a button from the user clicking it twice

Posted on 2014-02-05
6
368 Views
Last Modified: 2014-04-20
I have button in my form. I want the user to not be able to double click it or click it twice.

    <asp:Button ID="Button6" runat="server" Text="Cancel"  CssClass="cancelclass"  />

I need the code behind server side code to be executed on the button click, but at the same time not allow the user to click the button again. please help
0
Comment
Question by:TrialUser
6 Comments
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 125 total points
ID: 39835663
Try this :
<asp:Button ID="Button6" runat="server" Text="Cancel"  CssClass="cancelclass" OnClientClick="if(window.flag) return false;window.flag=true;"  />

Open in new window

0
 
LVL 19

Assisted Solution

by:Albert Van Halen
Albert Van Halen earned 250 total points
ID: 39835818
@leakim971 : you have to make sure that flag is being reset after a partial postback otherwise a second submit will fail.

Also if your form doesn't validate, clicking it again won't submit the form.

The default method of ASP.NET submitting the form = WebForm_OnSubmit. It returns true if the form can be submitted and takes care of validation.
I would hook in into that method in order to disable the button.

Put the code below in your page somewhere
	var old_WebForm_OnSubmit = WebForm_OnSubmit;
	WebForm_OnSubmit = function() {
		if(old_WebForm_OnSubmit()) {
			// disable the button here
		}
	};

Open in new window

0
 

Author Comment

by:TrialUser
ID: 39836958
AlbertVanHalen : I have more than one button that can submit the form. How do I make sure which form to disable?

Thanks
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 39838292
A dirty way is to use inline asp.net tags in markup
var old_WebForm_OnSubmit = WebForm_OnSubmit;
WebForm_OnSubmit = function() {
	if(old_WebForm_OnSubmit()) {
		document.getElementById('<%= <yourButton>.ClientID %>').disabled = true;
	}
};

Open in new window

0
 
LVL 9

Assisted Solution

by:Sar1973
Sar1973 earned 125 total points
ID: 39838485
On double click event: document.getElementById("myButton").disabled = true;
0
 
LVL 19

Accepted Solution

by:
Albert Van Halen earned 250 total points
ID: 39838694
Additional note : you need to return true or false in your method.
var old_WebForm_OnSubmit = WebForm_OnSubmit;
WebForm_OnSubmit = function() {
	if(old_WebForm_OnSubmit()) {
		document.getElementById('<%= <yourButton>.ClientID %>').disabled = true;
		return true;
	} else
		return false;
};

Open in new window

0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question