使用jquery将提交按钮更改为加载图像 [英] Change submit button to a loading image with jquery

问题描述

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

On a lot of sites lately, I've seen buttons being replaced with loading/thinking images after they are pressed, to prevent double clicks and make sure the user knows something is going on before the page flickers off. In this case, nothing asynchronous is actually happening -- just a regular form submit.

知道如何做到这一点的好教程？

Know of any good tutorials for how to do this?

推荐答案

走最简单的方法。假设你的按钮是btnSubmit。

Go the simplest way. Say your button is 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点击按钮：

Now using jquery, on click of the button:

<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将显示。页面将回发。好处是如果验证失败，您可以再次启用提交按钮并隐藏加载图像。在这种情况下，显然您将显示错误消息。

The submit button will be disabled, the animating image loading.gif will show up. And the page will postback. The benefit is that if validation fails you can again enable the submit button and hide the loading image. In such case, obviously you will show the error message.

这篇关于使用jquery将提交按钮更改为加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！