ASP.NET blog by Subgurim

Some things about ASP.NET, C#, ASP.NET AJAX, javascript...

ClickOnce Button

Working in one of my applications, I needed a button that disables when it were clicked.

 So I have been working on it and here is the final code.

 

There are only two Assumptions:

  • The Button must be of type button, no of type submit.
  • The javascript should control if we are working with validator.

 

.aspx

         <asp:TextBox ID="TextBox1" runat="server" ValidationGroup="SubgurimTest"></asp:TextBox>
       
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
            ErrorMessage="*" ControlToValidate="TextBox1" ValidationGroup="SubgurimTest">
        </asp:RequiredFieldValidator>
       
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="OnceClickMe" ValidationGroup="SubgurimTest"
            UseSubmitBehavior="false" OnClientClick="clickOnce(this, 'Cargando...')" />
           
        <br />
       
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>

 

.aspx.cs

     protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(1000);
        Label1.Text = DateTime.Now.ToString();
    }

 

.js
         function clickOnce(btn, msg)
        {
            // Test if we are doing a validation
            if (typeof(Page_ClientValidate) == 'function')
            {
                // if we are doing a validation, return if it's false
                if (Page_ClientValidate() == false) { return false; }
            }
           
            // Ensure that the button is not of type "submit"
            if (btn.getAttribute('type') == 'button')
            {
                // The msg attibute is absolutely optional
                // msg will be the text of the button while it's disabled
                if (!msg || (msg='undefined')) { msg = 'Loading...'; }
               
                btn.value = msg;

                // The magic :D
                btn.disabled = true;
            }
           
            return true;
        }


 I wish it can help you

Comments

sarmaad said:

Thank you, this is the only one that worked for me.

cheers

# November 17, 2007 7:53 AM

subgurim said:

Happy to help you :D

# November 17, 2007 9:36 AM

Vijay Chauhan said:

Execelent function. I searching for it for 1 weak and finally i got it

# January 22, 2008 7:30 AM

Jan said:

Excellent snippet, thanks.

There is a small bug in your if statement:

if (!msg || (msg='undefined')) { msg = 'Loading...'; }

The msg='undefined' should be msg=='undefined'

How would I get this to work for an ImageButton or LinkButton? The btn.getAttribute('type') returns '' for a LinkButton and 'image' for btn.getAttribute('type'). If I include these, the Link and Image buttons remain disabled. Is there a way around this?

# February 7, 2008 12:21 PM

subgurim said:

Ups!

Yes, that's true ;)

And about your question, try to change the line:

if (btn.getAttribute('type') == 'button')

to:

if (btn.getAttribute('type') != 'submit')

It should work for LinkButton, ImageButton, Button, etc.

Please, test it and post here the results :D

# February 8, 2008 5:35 AM

GOLUN YU said:

thanks!

# April 24, 2008 10:49 AM

asp net button link said:

Pingback from  asp net button link

# May 2, 2008 7:08 PM

Greg H said:

I tried this with an ImageButton but WITHOUT the validator control. The image button gets disabled but the click event does not fire. I removed the UseSubmitBehavior="false" property because I was getting a VS error saying it's not a valid attribute on ImageButton control.

                   <asp:ImageButton ID="btnFinalizeStep4b" runat="server" AlternateText="Check out and Finalize New Agent Registration"

                       OnClientClick="clickOnce(this, 'Finalizing...')"

                       OnClick="Step4Finalize_Click"  ImageUrl="images/button_finalize.gif" />

   Protected Sub Step4Finalize_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles btnFinalizeStep4.Click, btnFinalizeStep4b.Click

       If FinalizeAgentRegistration() Then

           'Populate Cart Details on Last Page

           Call FillFinalReviewDetails(True)

           MultiViewAgentReg.ActiveViewIndex = 4

           'Me.lblHeader.Text = "Register New Agent - Step #5 (Complete)"

       Else

           Me.ErrorMessageHolder.Visible = True

       End If

   End Sub

Any thoughts? Is the RequiredFieldValidator mandatory? Should I

# July 30, 2008 3:32 PM

dotNetNewbie said:

Excelent!!! Works perfect!!

Thank You!!

Best Regards,

Manuel

# February 21, 2009 12:20 PM

齐世昌 said:

今天在一个ASP.NET项目中,有个页面提交时,因为数据量比较大,页面刷新比较慢,有的用户多次点击提交按钮。导致有多条记录插入到数据。

就想把按钮做成只能点击一次,不能再次点击的效果。在网上查找按钮...

# June 24, 2009 8:22 AM

Shalini Kondapalli said:

Excellent code snippet, this is exactly what I had been trying for a long time! Thanks you.

# October 29, 2009 12:26 PM

THANK YOU said:

I want to cry I am so happy I found this!!!!!!!!!!!!

# March 31, 2010 7:35 PM

Tal said:

Thanks for helping code!

Is there a reason why can't I use it for submit button,

and then submit the form in the js method if it is indeed submit?

if (type=='button'){

...

}else if (type=='submit'){

...

forms[0].submit

}

?

# June 20, 2010 1:13 AM

Scott Smeester said:

Nice and simple.  It makes me wonder why do people have to make things so complicated.

Bravo...

Scott

# August 19, 2010 2:46 PM
Leave a Comment

(required) 

(required) 

(optional)

(required)