If you want to show animated gif image after clicking on a submit button to show users that request is on process , here we show you how to do that in so simple way: Let’s assume that we have a form like below:

<form  name="myForm"  method="post" action="" >
<br />
<input type="submit"  value="Click!" style="width:100px;" />
</form>

to show loading image we have tow options: jQuery and Javascript   to use jQuery method just add code below to your page before </header>

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

then change the form code to this

<form  action="" >
<br />
<input type="submit"  value="Click!" style="width:100px;" onclick="$('#loading').show();"/>
</form>
<div id="loading" style="display:none;"><img src="loading.gif" alt="" />Loading!</div>

example:

 

Loading!

 

to use Javascript method just add code below to your page after your form:  

<script type="text/javascript">
(function (d) {
  d.getElementById('form').onsubmit = function () {
    d.getElementById('submit').style.display = 'block';
    d.getElementById('loading2').style.display = 'block';
  };
}(document));
</script>

  And HTML code would be:

<form id="form" action="">
  <div id="loading2" style="display:none;"><img src="loading.gif" alt="" />Loading!</div>
  <input id="submit" value="Click!" type="submit" />
</form>

example:

Loading!

Now if you want to display image instead of submit button just change this line below of script above

d.getElementById('submit').style.display = 'block'

to this:

d.getElementById('submit').style.display = 'none'

Loading!