CODEWITHSUNDEEP
javascriptjqueryhtmlcss
robhardgood
robhardgood

Reputation: 43

How do I get an img to display after clicking a submit button?

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?

Upvotes: 4

Views: 1080

Answers (4)

Kent Brewster
Kent Brewster

Reputation: 2520

Here's one way of doing this without jQuery:

<form id="f">
  <input />
  <p id="p" style="display:none;">Loading!</p>
  <input id="b" type="submit" />  
</form>   
<script type="text/javascript">
(function (d) {
  d.getElementById('f').onsubmit = function () { 
    d.getElementById('b').style.display = 'none';
    d.getElementById('p').style.display = 'block'; 
  };
}(document));  
</script>

Upvotes: 0

marissajmc
marissajmc

Reputation: 2603

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();
    });
});

Upvotes: 5

Elangovan
Elangovan

Reputation: 1464

you can use jQuery submit event handler.

$("#form1").submit(function() 
              {
                 $('#submit1').hide();
                 $('.loadingImg').show();
                 return true;
              });

Check this link for API reference http://api.jquery.com/submit/

Upvotes: 0

Ortiga
Ortiga

Reputation: 8814

$(function(){
    $('input[type="submit"]').click(function(){
        $('p.loadingImg').show();
    });
});

1- You can also disable the submit button to avoid a second click, using $(this).attr('disabled', 'disabled'); in the click event

2- if your form is submited by ajax, it's better for you to treat this in the ajax call

Upvotes: 2

Related Questions