Change submit button to a loading image with jquery

Question

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

Answer 1

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; });
    });
});

Answer 2

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>

Answer 3

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>