logo标签列表

使用jQuery将提交按钮更改为加载图片

jqueryimagebuttonreplacesubmit
6

最近在很多网站上，我看到按钮在被按下后被替换为加载/等待图片，以防止双击并确保用户知道页面闪烁之前正在发生某些事情。在这种情况下，实际上没有发生任何异步操作--只是一个常规的表单提交。

我该如何使用jQuery重新创建这个效果？

9个回答
12

走最简单的路线。假设你的按钮名称是btnSubmit。

<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit" />
<div id="divMsg" style="display:none;">
    <img src="../images/loading.gif" alt="Please wait.." />
</div>

现在使用 jQuery，在按钮点击时：

<script type="text/javascript">
     $('#btnSubmit').click(function(){
         $(this).attr('disabled','disabled');
         $('#divMsg').show();
         //your client side validation here
         if(valid)
            return true;
         else
            {
              $(this).removeAttr('disabled');
              $('#divMsg').hide();     
              return false;
            }
     });
</script>

提交按钮将被禁用，加载动画图片loading.gif将显示出来。页面将会提交数据。这样做的好处在于，如果验证失败，您可以再次启用提交按钮并隐藏加载图像。在这种情况下，显然您将显示错误消息。

1
你可能想使用.submit()监听器事件，以便捕获键盘事件。 - Paul
4

虽然仅仅用图像替换提交按钮可能有效，但是移除按钮可能会导致提交输入的值未被发送（比如当它被禁用时）。这可能会对某些依赖于提交值被发送到服务器的应用程序造成问题 - 例如测试用户按下了哪个提交按钮或者为多个操作使用同一个控制器。

对于这些情况，您可以使用另一种同样有效的方法 - 隐藏提交并添加图像：

$(document).ready(function() {
    $('input[type="submit"]').click(function() {
        $(this).css('display', 'none');
        $('<img>').attr('src', 'http://www.mayla.ro/App_Themes/Glass/Editors/Loading.gif').insertAfter($(this));
    });
});
2

我的做法是：

$(document).ready(function () {
    $('.class_name').click(function () {
        $(this).parent().append('<img src="data:image/gif;base64,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" />');
        $(this).hide();
    });
});
你在最后给自己加分了吗？这个链接的目的是什么？ - Dharman
1
使用 .replaceWith() 方法：
$(".submitButton").click(function () {
    $(this).replaceWith("<img src='loading.gif'>");
});
替换提交按钮不是会在一开始就禁用表单的提交吗？ - iDrwish
它禁用了重新提交表单。替换提交按钮的代码位于单击处理程序中，因此只有在单击后才会替换提交按钮。在按钮被替换为图像之后，表单已经被提交了。 - gilly3
0

将事件绑定到表单是一种标准做法

<script type="text/javascript">
     $('form').submit(function(){
         $('#btnSubmit').attr('disabled','disabled');
         $('#divMsg').show();
         //your client side validation here
         if(valid)
            return true;
         else
            {
              $(this).removeAttr('disabled');
              $('#divMsg').hide();     
              return false;
            }
     });
</script>
0

我认为你正在寻找这个，按钮在onclick事件中具有此功能updatemycartpage()

<script language="JavaScript">
     function updatemycartpage(index,itemId,itemnumber){

   jQuery('#Page').html('<p><center><img src="/images/ajax-loader.gif"/></center></p>');
    $.post("/cart.php", {
        'hidItemId[]' : itemId,
        'hidLineId[]' : itemnumber

    },function(data){
        document.location.href ="/cart.php";
    });
}
</script>
0

这将在表单的提交时，用图像替换所有的提交输入框。

$(function() {
    $("form").submit(function() {
        $(":submit").replaceWith('<img src="/loading.gif" />');
    });
});

如果用户在表单字段中按下回车键，您可能还想禁用再次提交表单...

$(function() {
    // only run this handler on the first submit of the form 
    $("form").one("submit", function() {
        // replace all submit inputs with an image
        $(":submit").replaceWith('<img src="/loading.gif" />');  
        // don't let this form be submitted again
        $(this).submit(function() { return false; });
    });
});
0

只需删除提交按钮并将其替换为您的图像（从onclick事件中执行此操作）。

0

以上任何一种“替换”策略都可以奏效，但请记住一件事：如果您不是在提交表单（例如Web表单），而是在提交到另一个页面（例如MVC），用户将能够点击返回按钮。此时，按钮将被隐藏，您将只看到一个旋转器。

我一直遇到这个问题，并发现如果将BODY标签的unload属性设置为空白""，这将使页面“默认”回到其原始状态。我猜这会清除浏览器缓存版本的页面，因此它将知道返回到原始版本，其中旋转器被隐藏。添加了这个空卸载后，问题得到了解决。我已经在FF和Chrome上尝试过了。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接