Question

我有这个加载器条gif，默认情况下是不可见的：

     <p class="loadingImg" style="display:none;"><img src="/design/styles/_shared/classic-loader.gif" alt="" /></p>

当用户点击表单底部的提交按钮时，我希望显示该gif，并使提交按钮消失。基本上，提交按钮应该由此加载程序栏替换，以便用户知道在再次单击之前等待。我相信我可以使用一些onclick javascript ... 帮助

Answer 1

你可以用jQuery这样做：

将jquery添加到您的网站

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

在<script>标记或外部js文件中添加以下代码。引号之间的文本是提交按钮的选择器。

$(document).ready(function(){
    $('#submit-btn-id').click(function(){
        $(this).hide();
        $('.loadingImg').show();
    });
});

Answer 2

$(function(){
    $('input[type="submit"]').click(function(){
        $('p.loadingImg').show();
    });
});

1-你也可以使用$（this）.attr（'disabled'，'disabled'）禁用提交按钮以避免第二次点击;在点击事件中

2-如果您的表单是由ajax提交的，那么最好在ajax调用中对此进行处理

Answer 3

您可以使用jQuery提交事件处理程序。

$("#form1").submit(function() 
              {
                 $('#submit1').hide();
                 $('.loadingImg').show();
                 return true;
              });

点击此链接获取API参考http://api.jquery.com/submit/

Answer 4

这是没有jQuery的一种方法：

<form id="f">
  <input />
  <p id="p" style="display:none;">Loading!</p>
  <input id="b" type="submit" />  
</form>   
<script type="text/javascript">
(function (d) {
  d.getElementById('f').onsubmit = function () { 
    d.getElementById('b').style.display = 'none';
    d.getElementById('p').style.display = 'block'; 
  };
}(document));  
</script>

单击提交按钮后如何显示图像？

4 个答案: