Geek Answers Handbook

How to get img to display after clicking submit button?

I have this gigager downloader screen which is invisible by default:

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

When the user clicks the submit button at the bottom of the form, I want this gif to display and the submit button to disappear. Basically, the submit button should be replaced with this bootloader panel so that the user knows to wait before clicking again. I believe that I can use some javascript onclick ... Help?

+4
source share
4 answers

You can do this with jQuery:

Add jquery to your website

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

Add the code below inside the <script> tags or external js file. The text between quotation marks is a selector for the submit button.

 $(document).ready(function(){ $('#submit-btn-id').click(function(){ $(this).hide(); $('.loadingImg').show(); }); });
+5
source 
 $(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 click event

2- if your form is submitted by ajax, you better consider this in ajax call

+2
source

you can use jQuery submit event handler.

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

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

0
source

Here is one way to do 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>
0
source

More articles:


All Articles