jquery - 提交时显示加载器和禁用按钮

Question

我正在使用以下代码在提交表单时显示加载器和禁用按钮。

我在弹出窗口中有我的表单，在 chrome 中，当我的弹出窗口关闭时，按钮会被禁用。当用户单击提交按钮时，我需要禁用按钮。

 $('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"}); 
});

Answer 1

如果您在提交中添加 onclick 事件，如下所示：

<input type='submit' value='submit' onclick="$(this).prop('disabled',true)" />

适合你？

Answer 2

尝试这个：

$('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"
}); });