Disable LinkButton on Click - Nothing is working

Question

I've seen a few posts but I cannot get this to work. I have a "Save" button setup as a LinkButton. When they click on it, I want it to fire the postback but also disable the button so they cannot click on it numerous times. I've tried disabling the button via javascript, ajax update panels but nothing is working. Even in the Javascript I did an alert so I know it was getting to the JS function but it never disabled the button. Here is the structure of my "toolbar" of buttons. Any thoughts on how to structure it?

<div class="navbar-collapse collapse navbar-right" id="main_navbar">
                    <ul class="nav navbar-nav">
                        <li id="liNew" runat="server">
                            <asp:LinkButton ID="lnkbtnNew" CssClass="" runat="server" ToolTip="Click to add a new record" TabIndex="3">
                            <span class ="fa fa-plus"></span>
                            <span class=""></span>
                            <span class="">~New~</span>
                            </asp:LinkButton>
                        </li>
                        
                        <li id="liSave" runat="server">
                            <asp:LinkButton ID="lnkbtnSave" CssClass="" runat="server" ToolTip="Click to save this record" TabIndex="6">
                        <!-- OnClientClick="javascript:DisableButton(this);" -->
                            <span class="fa fa-floppy-o"></span>
                            <span class=""></span>
                            <span class="">~Save~</span>
                            </asp:LinkButton>
                        </li>
                    </ul>
                </div>

Perhaps I just don't know how to structure the UpdatePanel but if I put this entire Div in it, nothing seems to fire.

The Javascript I tried is below and then I added to the LinkButton the attribute OnClientClick="javascript:DisableButton(this);"

function DisableButton(e) {
        var x = document.getElementById('lnkbtnSave');
        if (x != null) {
            x.disabled = true;
            alert("disabled");
        }
        return false;
    }

Tried return true or return false above and nothing ever disables the control on the screen.

A quick google and perhaps this https://stackoverflow.com/questions/10276133/how-to-disable-html-links might work? — Salik Rafiq, Aug 10 '20 at 17:52
The href invokes the postback which I still want to happen ... I just want to disable the button after they hit it once. — Sherry Jackson, Aug 10 '20 at 19:45

G3nt_M3caj · Answer 1 · 2020-08-10T19:45:33.090

It’s default behaviour that the LinkButton is Enabled/Disabled (as was before the Postback) after every Postback and you cannot with js directly as the page is refreshed every Postback.
So, if you need always this button cause the PostBack the easiest way to disable it is from Server Side as follows (exist other ways but more complicated with cookies, js etc.. but I advise this):

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    ' Be sure the PostBack is caused by Button your lnkbtnSave   
    If IsPostBack AndAlso Page.Request.Params.Get("__EVENTTARGET").Equals(lnkbtnSave.ID) Then

        'here test your scenarios which decides if you have to disable or not your button
        If 1 = 1 Then
            lnkbtnSave.Enabled = False
        End If

    End If

End Sub

Disable LinkButton on Click - Nothing is working

1 Answers1