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

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');
        $('').attr('src', 'http://www.mayla.ro/App_Themes/Glass/Editors/Loading.gif').insertAfter($(this));
    });
});