display loading image after clicking on a submit button java script jquery


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:

 

 

 

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:

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'


2 comments

  1. Marion says:

    That is a problem I must do more research into, appreciation for the publish.

  2. vicodin says:

    Hello, nice site. Posted by myself in bookmarks

Leave a Reply to Marion Cancel reply

Your email address will not be published. Required fields are marked *