Change submit button to a loading image with jquer

问题:

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?

回答1:

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.." />
</div>

Now using jquery, on click of the button:

<script type="text/javascript">
     $('#btnSubmit').click(function(){
         $(this).attr('disabled','disabled');
         $('#divMsg').show();
         //your client side validation here
         if(valid)
            return true;
         else
            {
              $(this).removeAttr('disabled');
              $('#divMsg').hide();     
              return false;
            }
     });
</script>

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.

回答2:

Although simply replacing the submit with an image might work, removing the button might prevent the submit input's value from being sent (like when it's disabled). This can cause problems for some applications that rely on the submit's value being sent to the server - for example testing which submit button the user has pressed or using the same controller for many actions.

For those cases, you can use another method that works just as good - hiding the submit and adding an image:

$(document).ready(function() {
    $('input[type="submit"]').click(function() {
        $(this).css('display', 'none');
        $('<img>').attr('src', 'http://www.mayla.ro/App_Themes/Glass/Editors/Loading.gif').insertAfter($(this));
    });
});

回答3:

Use .replaceWith():

$(".submitButton").click(function () {
    $(this).replaceWith("<img src='loading.gif'>");
});

回答4:

my way of doing this:

$(document).ready(function () {
    $('.class_name').click(function () {
        $(this).parent().append('<img src="data:image/gif;base64,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" />');
        $(this).hide();
    });
});

credits: https://github.com/phpawy/jquery-submit-once

回答5:

Simply remove the submit button and replace it with your image (do this from an onclick event).

回答6:

I think you are looking for this one ,button have this function updatemycartpage() in onclick event

<script language="JavaScript">
     function updatemycartpage(index,itemId,itemnumber){

   jQuery('#Page').html('<p><center><img src="/images/ajax-loader.gif"/></center></p>');
    $.post("/cart.php", {
        'hidItemId[]' : itemId,
        'hidLineId[]' : itemnumber

    },function(data){
        document.location.href ="/cart.php";
    });
}
</script>

回答7:

This replaces all submit inputs with an image onsubmit of the form

$(function() {
    $("form").submit(function() {
        $(":submit").replaceWith('<img src="/loading.gif" />');
    });
});

You may also want to disable submitting the form again, in case the user hits enter in a form field...

$(function() {
    // only run this handler on the first submit of the form 
    $("form").one("submit", function() {
        // replace all submit inputs with an image
        $(":submit").replaceWith('<img src="/loading.gif" />');  
        // don't let this form be submitted again
        $(this).submit(function() { return false; });
    });
});

回答8:

Event can be binded on form as a standard practice

<script type="text/javascript">
     $('form').submit(function(){
         $('#btnSubmit').attr('disabled','disabled');
         $('#divMsg').show();
         //your client side validation here
         if(valid)
            return true;
         else
            {
              $(this).removeAttr('disabled');
              $('#divMsg').hide();     
              return false;
            }
     });
</script>

回答9:

Any of the above "replacing" strategies will work, but keep one thing in mind: If you aren't posting back (e.g. webforms), but posting to a different page (e.g. MVC), the user will be able to click back. At this point the button will be hidden and all you will see is a spinner.

I kept running into this problem and found that if you set the unload attribute of the BODY tag to a blank "", this will sort of "default" the page back to its original state. I guess this clears out your browser's cached version of the page so it will know to go back to the original version where the spinner was hidden. After I added this blank unload, it fixed the issue. I've tried it on FF and Chrome so far