How to show a hidden div with javascript when submitting a form?

Question

I'm not really familiar with jquery, but am trying to get a simple animated gif to show when a form is submitted. When clicking 'submit' to upload an image I want to show gif so that users know that image is being uploaded. The submit button has an id="submit" and also an onClick="return confirm('message')"

I have the div code containing the gif:

<div id="loading" style="display:none">

    <img src="images/hand_timer2.gif" alt="loading" />

</div>

which is hidden. And it does show if I remove the style. Fair enough. But when I try to show it with the following javascript it doesn't show:

<script type="text/javascript">

    $(function(){
        $('#submit').click(function(){
        $('#loading').show();

        }); 
    });

I have

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

in a separate PHP header file. As far as I can see it's the only reference to jquery library, but I do have other javascript codes that all work. I just can't get this one to work. Can anyone point out what I'm doing wrong and why I can't get the div to show gif when clicking submit?

Answer 1

I believe the problem could be that your inline onClick="return confirm('message')" prevent the click-event from reaching your click-event listener attached with jQuery - not sure though. Anyhow, instead of listening for a click-event on the submit-button, I would listen for the submit event on the form, that will fire when the form is actually submitted (a form can usually be posted by other means than clicking the submit button as well - through the Enter key for instance).

$('#idOfYourForm').on("submit", function () {
    $('#loading').show();
});

Side note:

You don't close the style attribute properly on your loading div (notice that the > is blue):

<div id="loading" style="display:none>