提交时显示加载器和禁用按钮答案

【问题标题】：Show loader and disable button on submit提交时显示加载器和禁用按钮
【发布时间】：2014-09-19 09:19:53
【问题描述】：

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

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

【问题讨论】：

我对您的文字进行了一些修改 - 因为我不能 100% 确定您的意思，请确保它仍然有意义。
我没有得到您所做的更改？如果你能帮助我，我会很感激..
在您的签名左侧（这些 cmets 的正上方）应该有一条说明“编辑 [时间] 前” - 点击它，您可以比较差异。

标签： jquery ajax jqxwidgets

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案2】：

如果您像这样在提交中添加 onclick 事件：

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

适合你吗？

【讨论】：

如果我把它放在提交中，那么它必须在它禁用之前提交我不希望我想要两个动作同时运行..不是一个接一个
我无法在提交按钮中添加它
@user3913769 为什么会这样？ ))
因为我不允许更改表单...我需要在 jquery 的帮助下完成它而不更改 html.. 我需要让我的加载器也工作..我无法在那里定义