Question

I have this loader-bar gif that is by default invisible:

     <p class="loadingImg" style="display:none;"><img src="/design/styles/_shared/classic-loader.gif" alt="" /></p>

When the user hits the submit button at the bottom of the form, I want that gif to be displayed, and for the submit button to disappear. Basically the submit button should be replaced by this loader bar so that the user knows to wait before clicking again. I believe I can use some onclick javascript…
Help?

Answer 1

You can do it this way with jQuery:

Add jquery to your site

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

Add the code below inside <script> tags or an external js file.
The text between the quotes is the selector for your submit button.

$(document).ready(function(){
    $('#submit-btn-id').click(function(){
        $(this).hide();
        $('.loadingImg').show();
    });
});