Question

我有HTML提问和一个提交按钮：

    <Input type = "Submit" Name = "Submit6" VALUE = "Dalej >">

我使用jQuery来保护用户可以使用以下代码在提交按钮中单击两次的情况：

<script>
    $('form').submit(function(){
        $(this).find(':submit').attr('disabled','disabled');
    }); 
</script>

现在我想开发这部分脚本在加载过程中同时显示gif动画。我看到我的用户不知道为什么这个系统不起作用，他们试图点击下次提交，但它被禁用。

我有两个想法，我该如何解决它。一个是显示gif animatino（如ajax或其他不同的东西），然后用动画熄灭页面。首先会更容易，对我来说还可以。

你能给我一些提示吗？

Answer 1

假设您正在使用ajax请求将数据发布到服务器，

将图像添加到html页面

<img id='waiting' src="waiting.gif" style="display:none"/>

并改变这样的脚本，

<script>
    $('form').submit(function(){
        $(this).find(':submit').attr('disabled','disabled');
        $("#waiting").css("display","block");
        $.post("/url/to/post/data", function(){        
          $("#waiting").css("display","none");
        });
    }); 
</script>

Answer 2

使用按钮代替sumit

$(document).ready(function(e) {
    $("form :button").click(function(){
        $(this).attr('disabled','disabled');
        $("html").fadeOut("1000",function(){ // fade animation
            $("form").submit();
        });
    })
});

Answer 3

如果您使用的是Bootstrap，则有一种用于此类功能的组件，

http://getbootstrap.com/javascript/#buttons

从中获得启发我还创建了一个按钮，在启用或禁用类时切换类，并根据当前类，您可以在每个状态上显示不同的文本

<button class="btn-progressive">
    <span class="button-label">Log In</span> 
    <i class="icon-spinner icon-large icon-spin"></i>
</button>

并且可以使用css，

.btn-progressive .icon-spinner { display: none; }

.btn-progressive.progressing .icon-spinner { display: inline; }

.btn-progressive.progressing .button-label { display: none; }

因此，当切换按钮的启用状态时，我们也可以切换'proressing'类。

P.S。如果您对CSS3兼容性没有问题，则还可以对这些CSS规则使用disabled属性

提交后的动画

3 个答案: