How do I get an img to display after clicking a submit button?

Question

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

     <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?

Answer 1

You can do it this way with jQuery:

Add jquery to your site

<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();
    });
});

Answer 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

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

Answer 3

you can use jQuery submit event handler.

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

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

Answer 4

Here's one way of doing this without 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>