在提交时显示加载程序和禁用按钮

时间:2014-09-19 09:19:54

标签: jquery ajax jqxwidgets

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

我的表单在弹出窗口和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"}); 
});

2 个答案:

答案 0 :(得分:0)

如果您在提交中添加onclick事件内联,请执行以下操作:

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

适合你吗?

答案 1 :(得分:0)

试试这个:

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