Disabling asp.net button on click and show loading image

Question

I am working on an asp.net page. Page as a button which redirects user to another page using response.redirect. I want to disable the button and show a loading icon.

I used this jquery

$('.rbutton').on('click', function () {
$(this).prop("disabled", true);

It disables the button but then server side code is not fired.

button is not surrounded with ajax update panel. I don't want to use ajax toolkit.

How can I show loading image on click of search button and then disable the button until user is redirected to new page ?

Answer 1

ASP.Net won't execute server code for a disabled button. In the past, I've simply hidden the button and replaced it with another button that is disabled... has worked well for me.

<asp:Button ID="_pay" OnClick="SomeGreatCode" Text="Pay Up!" runat="server" />
<asp:Button ID="_process" Enabled="false" Text="Processing..." runat="server" />


<script>
$(document).ready(function () {
    $("#<%= _process.ClientID %>").hide();
    $('#<%= _pay.ClientID %>').on('click', function () {
        if (Page_IsValid) {
            $(this).hide();
            $("#<%= _process.ClientID %>").show();
        }
    });
});
</script>