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: <
[email protected]>
!MIME-Version: 1.0
!Content-Type: text/plain
!Content-Transfer-Encoding: 7bit
!From: (e-mail address removed) (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: <
[email protected]>
!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: (e-mail address removed) (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: <
[email protected]>
!!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: (e-mail address removed)
!!NNTP-Posting-Date: 30 Jul 2003 13:54:56 GMT
!!Path: cpmsftngxa06.phx.gbl!TK2MSFTNGP08.phx.gbl!newsfeed00.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
!!
!
!
!
