By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,855 Members | 1,996 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,855 IT Pros & Developers. It's quick & easy.

disable or prevent a button with onclick and javascript

P: n/a
I scoured this group and others looking for the best way to disable a
button after the first click to prevent multiple submissions, but
never did find anything that worked like they said it would. I went
ahead and wrote my own bit of code so I'm sharing it here for
everyone. Even though it doesn't really disable the button by greying
it out, it prevents the multiple submissions which it what I was
attempting to prevent all along. Disabling the button caused my
serverside events not to fire. I couldn't figure a way around that
limitation.

Put this in between the HEAD tags of your page:
<HEAD>
....
<SCRIPT language=javascript>
var submitFlag = false;
</SCRIPT>
....
</HEAD>

Add this line to Page_Load():
btn_RegisterMe.Attributes.Add("onclick",
"javascript:if(submitFlag){return false;}else{submitFlag=true;return
true;}")

Change btn_RegisterMe to whatever the name of your button that you
want to prevent multiple submissions from.

Chris
Nov 17 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Hello Chris,

Thanks very much for your post.

Best regards,
Yanhong Huang
Microsoft Online Partner Support

Get Secure! - www.microsoft.com/security
This posting is provided "AS IS" with no warranties, and confers no rights.

--------------------
!From: cr******@heery.com (techfuzz)
!Newsgroups: microsoft.public.dotnet.framework.aspnet
!Subject: disable or prevent a button with onclick and javascript
!Date: 30 Jul 2003 06:54:55 -0700
!Organization: http://groups.google.com/
!Lines: 28
!Message-ID: <63*************************@posting.google.com>
!NNTP-Posting-Host: 67.96.192.158
!Content-Type: text/plain; charset=ISO-8859-1
!Content-Transfer-Encoding: 8bit
!X-Trace: posting.google.com 1059573296 26385 127.0.0.1 (30 Jul 2003 13:54:56 GMT)
!X-Complaints-To: gr**********@google.com
!NNTP-Posting-Date: 30 Jul 2003 13:54:56 GMT
!Path: cpmsftngxa06.phx.gbl!TK2MSFTNGP08.phx.gbl!newsfeed 00.sul.t-online.de!t-online.de!newsfeed.freenet.de!
feed.news.nacamar.de!news.maxwell.syr.edu!sn-xit-03!sn-xit-01!sn-xit-09!supernews.com!postnews1.google.com!not-for-mail
!Xref: cpmsftngxa06.phx.gbl microsoft.public.dotnet.framework.aspnet:163359
!X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
!
!I scoured this group and others looking for the best way to disable a
!button after the first click to prevent multiple submissions, but
!never did find anything that worked like they said it would. I went
!ahead and wrote my own bit of code so I'm sharing it here for
!everyone. Even though it doesn't really disable the button by greying
!it out, it prevents the multiple submissions which it what I was
!attempting to prevent all along. Disabling the button caused my
!serverside events not to fire. I couldn't figure a way around that
!limitation.
!
!Put this in between the HEAD tags of your page:
!<HEAD>
!...
! <SCRIPT language=javascript>
! var submitFlag = false;
! </SCRIPT>
!...
!</HEAD>
!
!Add this line to Page_Load():
!btn_RegisterMe.Attributes.Add("onclick",
!"javascript:if(submitFlag){return false;}else{submitFlag=true;return
!true;}")
!
!Change btn_RegisterMe to whatever the name of your button that you
!want to prevent multiple submissions from.
!
!Chris
!
Nov 17 '05 #2

P: n/a
Hello Chris,

I was thinking about your excellent code sample. There may be some people who want to combine it with the use of
validation controls. Here is another code snippet that adds two elements to your code sample.

First, it only disables the button if validation succeeds. This allows the end user to try again if validation fails.

Second, it uses a hidden field allow the button to continue as disabled even after the post back to the server is complete.
Most people will not want this. Just remove the hidden field and the references to it. I added it to be thorough.
<script language="javascript" id="clientEventHandlersJS">
<!--

function Button1_OnClick() {
document.all("Button1").disabled = "disabled";
var AllowPost;
if (typeof(Page_ClientValidate) == 'function')
{
Page_ClientValidate();
if (Page_IsValid)
AllowPost = true;
else
AllowPost = false;
}
else
{
AllowPost = true;
}
if (AllowPost)
{
document.all("ButtonTest").value = "Button1";
Form1.submit();
return true;
}
else
{
document.all("Button1").disabled = "";
return false;
}
}
//-->
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<asp:textbox id="TextBox1" runat="server"></asp:textbox>
<asp:requiredfieldvalidator id="RequiredFieldValidator1" runat="server"
ErrorMessage="RequiredFieldValidator"
ControlToValidate="TextBox1"></asp:requiredfieldvalidator>
<asp:button id="Button1" runat="server" Text="Button"></asp:button>
<INPUT runat="server" id="ButtonTest" type="hidden" value="a"></form>
</body>
-----
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Button1.CausesValidation = False
Button1.Attributes.Add("language", "javascript")
Button1.Attributes.Add("onclick", "Button1_OnClick();")
If ButtonTest.Value = "Button1" Then
Button1.Enabled = False
End If
End Sub

Thanks very much.

Best regards,
Yanhong Huang
Microsoft Online Partner Support

Get Secure! - www.microsoft.com/security
This posting is provided "AS IS" with no warranties, and confers no rights.

--------------------
!X-Tomcat-ID: 71586656
!References: <63*************************@posting.google.com>
!MIME-Version: 1.0
!Content-Type: text/plain
!Content-Transfer-Encoding: 7bit
!From: yh*****@online.microsoft.com (Yan-Hong Huang[MSFT])
!Organization: Microsoft
!Date: Fri, 01 Aug 2003 03:04:16 GMT
!Subject: RE: disable or prevent a button with onclick and javascript
!X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
!Message-ID: <Al**************@cpmsftngxa06.phx.gbl>
!Newsgroups: microsoft.public.dotnet.framework.aspnet
!Lines: 57
!Path: cpmsftngxa06.phx.gbl
!Xref: cpmsftngxa06.phx.gbl microsoft.public.dotnet.framework.aspnet:164013
!NNTP-Posting-Host: TOMCATIMPORT1 10.201.218.122
!
!Hello Chris,
!
!Thanks very much for your post.
!
!Best regards,
!Yanhong Huang
!Microsoft Online Partner Support
!
!Get Secure! - www.microsoft.com/security
!This posting is provided "AS IS" with no warranties, and confers no rights.
!
!--------------------
!!From: cr******@heery.com (techfuzz)
!!Newsgroups: microsoft.public.dotnet.framework.aspnet
!!Subject: disable or prevent a button with onclick and javascript
!!Date: 30 Jul 2003 06:54:55 -0700
!!Organization: http://groups.google.com/
!!Lines: 28
!!Message-ID: <63*************************@posting.google.com>
!!NNTP-Posting-Host: 67.96.192.158
!!Content-Type: text/plain; charset=ISO-8859-1
!!Content-Transfer-Encoding: 8bit
!!X-Trace: posting.google.com 1059573296 26385 127.0.0.1 (30 Jul 2003 13:54:56 GMT)
!!X-Complaints-To: gr**********@google.com
!!NNTP-Posting-Date: 30 Jul 2003 13:54:56 GMT
!!Path: cpmsftngxa06.phx.gbl!TK2MSFTNGP08.phx.gbl!newsfeed 00.sul.t-online.de!t-online.de!newsfeed.freenet.de!
!feed.news.nacamar.de!news.maxwell.syr.edu!sn-xit-03!sn-xit-01!sn-xit-09!supernews.com!postnews1.google.com!not-for-
mail
!!Xref: cpmsftngxa06.phx.gbl microsoft.public.dotnet.framework.aspnet:163359
!!X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
!!
!!I scoured this group and others looking for the best way to disable a
!!button after the first click to prevent multiple submissions, but
!!never did find anything that worked like they said it would. I went
!!ahead and wrote my own bit of code so I'm sharing it here for
!!everyone. Even though it doesn't really disable the button by greying
!!it out, it prevents the multiple submissions which it what I was
!!attempting to prevent all along. Disabling the button caused my
!!serverside events not to fire. I couldn't figure a way around that
!!limitation.
!!
!!Put this in between the HEAD tags of your page:
!!<HEAD>
!!...
!! <SCRIPT language=javascript>
!! var submitFlag = false;
!! </SCRIPT>
!!...
!!</HEAD>
!!
!!Add this line to Page_Load():
!!btn_RegisterMe.Attributes.Add("onclick",
!!"javascript:if(submitFlag){return false;}else{submitFlag=true;return
!!true;}")
!!
!!Change btn_RegisterMe to whatever the name of your button that you
!!want to prevent multiple submissions from.
!!
!!Chris
!!
!
!
!
Nov 17 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.