使用jquery将提交按钮更改为加载图像

Question

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

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

Answer 1

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