Solved

Disable a button from the user clicking it twice

Posted on 2014-02-05
6
376 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
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

The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

Question has a verified solution.

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

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…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

724 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