如何在单击submit按钮后显示img ?

I have this loader-bar gif that is by default invisible:

我有这个loader-bar gif默认是不可见的:

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

When the user hits the submit button at the bottom of the form, I want that gif to be displayed, and for the submit button to disappear. Basically the submit button should be replaced by this loader bar so that the user knows to wait before clicking again. I believe I can use some onclick javascript... Help?

当用户点击表单底部的submit按钮时，我希望显示gif，并让submit按钮消失。基本上，提交按钮应该被这个加载器栏替换，以便用户知道在再次单击之前要等待。我相信我可以使用一些onclick javascript…帮助吗?

4 个解决方案

#1

You can do it this way with jQuery:

你可以用jQuery这样做:

Add jquery to your site

向站点添加jquery

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

Add the code below inside <script> tags or an external js file. The text between the quotes is the selector for your submit button.

将下面的代码添加到

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

#2

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

1- You can also disable the submit button to avoid a second click, using $(this).attr('disabled', 'disabled'); in the click event

1-您还可以使用$(this)禁用submit按钮以避免再次单击。attr(“禁用”,“禁用”);在单击事件

2- if your form is submited by ajax, it's better for you to treat this in the ajax call

2-如果表单是由ajax提交的，最好在ajax调用中处理

#3

you can use jQuery submit event handler.

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

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

Check this link for API reference http://api.jquery.com/submit/

检查此链接以获得API引用http://api.jquery.com/submit/

#4

Here's one way of doing this without jQuery:

这里有一种没有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>

#1