Q: Show loader and disable button on submit I am using the following code to show a loader and disable button when the form is submitted.
I have my form in a popup and in chrome the button gets disabled when my popup is closed. I need to disable button when user clicks the submit button.
 $('input[type=submit]').click(function () {
    if(navigator.userAgent.toLowerCase().indexOf('msie') > -1){
        $("body").append($('<div id="imageloader" class="loader"><img id="spinner" src="/images/ajax-loader.gif" alt="Spinner" /></div>'));
    }else{
        $('#imageloader').css('display','block'); 
    } 
    $(this).prop("disabled", true);
    $(this).closest('form').trigger('submit');
    $(this).css({"opacity":".2","cursor":"progress"}); 
    $("#hideWindowButton").attr("Click", "return false;"); // disabled cancel button 
    $("#hideWindowButton").css({"opacity":".2","cursor":"progress"}); 
});


A: if you add onclick event inline in your submit like this:
<input type='submit' value='submit' onclick="$(this).prop('disabled',true)" />

suits you?

A: Try this:

$('input[type=submit]').click(function(event) {
event.preventDefault();
if (navigator.userAgent.toLowerCase().indexOf('msie') > -1) {
    $("body").append($('<div id="imageloader" class="loader"><img id="spinner" src="/images/ajax-loader.gif" alt="Spinner" /></div>'));
} else {
    $('#imageloader').css('display', 'block');
}
$(this).prop("disabled", true);
$(this).closest('form').submit();
$(this).css({
    "opacity": ".2",
    "cursor": "progress"
});
$("#hideWindowButton").attr("click", "return false;"); // disabled cancel button 
$("#hideWindowButton").css({
    "opacity": ".2",
    "cursor": "progress"
}); });


