how do I go about adding a loading gif when a 'submit' is clicked? the page reloads itself so the gif just needs to appear as it will hide again on refresh

thanks!

    okay so ive gotten as far as being able to add an alert message when the submit button is clicked, but i ried to modify it to change the button to the image with:

    
<script>
$(document).ready(function() {
   $("#button").click(function() {
  $(this).src="images/loading.gif";

   });
});

</script>

    but with no luck. I'm definitely targeting the right element because

    <script>
$(document).ready(function() {
   $("#button").click(function() {
  alert("submit button clicked!");

   });
});

</script>

    works perfectly. anyone know what i need to do?

    EDIT:

    have figured how to replace the submit button with a loading gif on form submit

    <script>
<script>


$('#uploadform').submit(function() {
  $("#button").replaceWith( "<img src='images/loader.gif' class='loading'/>" );
});

</script>

    BUT, weirdly it works in IE but not chrome?? in chrome it does replace it, but the gif is invisible?

      Wouldn't it be easier to have the loading image there the whole time and just make it invisible until needed?

        Weedpacket;11003924 wrote:

        Wouldn't it be easier to have the loading image there the whole time and just make it invisible until needed?

        I was going to say this.

          It would not be easier as you are refreshing the same page which excute in no time

            Write a Reply...