Please wait Animation gif using javascript

Question

I am trying to use this post in order to get the animated gif for Please wait message.... on button click. However, when I open the sample html page that I am testing on, I get an input box instead of an button with am image.

Below is the html code that I am trying on a test page.

 <html>

 <script type="text/javascript">


  function loadSubmit() {
   var ProgressImage = document.getElementById('progress_image');
  document.getElementById("progress").style.visibility = “visible”;
   setTimeout(function(){ProgressImage.src = ProgressImage.src},100);
   return true;
    }
    </script>

 <body>
   <p style="visibility:hidden;" id="progress">

  <img id="progress_image" style="padding-left:5px;padding-top:5px;" src="ajax-loader.gif" alt=""> Uploading in progress…      </p> 
    <input class="contSubmit" onclick="return loadSubmit()" type=”button” src= "submitinfo_btn.png" /> 

     </body>
   </html>

score 2 · Answer 1 · answered Nov 26 '12 at 19:42

2

Be careful when copy-pasting Code like this. This is wrong:

type=”button”

This is right:

type="button"

Notice the difference? This happens if you copy Code from a website that doesn't have proper formatting for Code enabled.

answered Nov 26 '12 at 19:42

Stefan

2,164
1
23
40

score 1 · Accepted Answer · answered Nov 26 '12 at 19:44

1

According to your tutorial, the input should be of type "image", not "button".

answered Nov 26 '12 at 19:44

Christophe

27,383
28
97
140

It works now...I somehow missed it..thanks for pointing it out. Could you let me know how could I center the image instead of having it on the top left corner of the page – Janet Nov 26 '12 at 19:55
Do you need to center img or input type="image"? – Christophe Nov 26 '12 at 20:05
I have added in the css to center the image in the center of my page and also changed the input type to image. it works fine...Except that the dots on the circle to not animate on my page...Dont know whats wrong. – Janet Nov 26 '12 at 20:36
also double check your quotes, as suggested by @Stefan (for example "visible"). – Christophe Nov 26 '12 at 20:46

score 0 · Answer 3 · answered Nov 26 '12 at 19:45

0

Change your input type to image. The src is only valid for image.

Also, it appears your problem has nothing to do with your "please wait" animated gif, so maybe your title is misleading.

answered Nov 26 '12 at 19:45

Matt Burland

44,552
18
99
171

Please wait Animation gif using javascript

3 Answers3