key2starz key2starz - 3 months ago 20x
jQuery Question

Change submit button to a loading image with jquery

On a lot of sites lately, I've seen buttons being replaced with loading/thinking images after they are pressed, to prevent double clicks and make sure the user knows something is going on before the page flickers off. In this case, nothing asynchronous is actually happening -- just a regular form submit.

Know of any good tutorials for how to do this?


Go the simplest way. Say your button is btnSubmit.

<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit" />
<div id="divMsg" style="display:none;">
    <img src="../images/loading.gif" alt="Please wait.." />

Now using jquery, on click of the button:

<script type="text/javascript">
         //your client side validation here
            return true;
              return false;

The submit button will be disabled, the animating image loading.gif will show up. And the page will postback. The benefit is that if validation fails you can again enable the submit button and hide the loading image. In such case, obviously you will show the error message.