how to disable button after first click in javascript

Question

I am new to C#. I have a save button inside InsertItemTemplate. I have used the following code to disable the button after first click in java script but its not even working for the first click please help me.

<asp:ImageButton ID="imgbtnSave" runat="server" CommandName="Add" CausesValidation="true" OnClientClick="this.disabled='true';return true;"  />

I think the value in "OnClientClick" has to be a method in your C# code. You would then add the code to disable the button there, such as: imgbtnSave.Enabled = false; — B. Clay Shannon-B. Crow Raven
– B. Clay Shannon-B. Crow Raven, Commented Apr 5, 2016 at 18:02
Thank you for your response i want to stop multiple postbacks — bhavya158
– bhavya158, Commented Apr 5, 2016 at 18:17
@B.ClayShannon you are thinking of the OnClick atribute. OnClientClick essentially takes whatever you put in there and appends it to what ASP.NET puts in the onclick HTML attribute. — ElGavilan
– ElGavilan, Commented Apr 7, 2016 at 18:02

Gusman · Accepted Answer · 2016-04-05 18:22:49Z

1

You are modifying the "disabled" property of the DOM object on the browser, but the button will do a post back to the server when it's clicked, so any change to the DOM will be lost.

On the function where you handle the command "Add" in your server code you must retrieve the button from the InsertItemTemplate and set its "Enabled" property to false, that will disable the control from the server side.

If you want to avoid multiple clicks while the page has not been reloaded then you need a client function to avoid this, something like this:

<asp:ImageButton ID="imgbtnSave" runat="server" CommandName="Add" CausesValidation="true" OnClientClick="return checkEnabled(this);"  />

<!-- somewhere in your page -->
<script>
    function checkEnabled(item)
    {
        if(item.disabled != 'true')
        {
            item.disabled = 'true';
            return true;
        }

        return false;
    }
</script>

edited Apr 5, 2016 at 18:22

answered Apr 5, 2016 at 18:08

Gusman

15.2k2 gold badges38 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bhavya158 Over a year ago

Thank you so much.. I did try it but the function is being called twice if i hit save button twice. How do i stop it

Gusman Over a year ago

Mix both solutions, OnClientClick set OnClientClick="if(this.disabled != 'true'){this.disabled='true';return true;}else{ return false; }" and the server part remains the same

bhavya158 Over a year ago

Thank you .. I called the function using this keyword to access image button from list view but its allowing multiple post backs OnClientClick= "checkEnabled(this)"

Gusman Over a year ago

YOu missed the "return", that's what will block the second post back

Collectives™ on Stack Overflow

how to disable button after first click in javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related