Show gif img only if form is validated

So the problem is I want to show a gif image to indicate that the form I’ve submited is being loaded, but even if the form is not validated the gif pops up, so what should I do?

to solwe this problem there is a simple jquery code you can use, by telling the page the show the gif only if the form is submited. Here’s what you need.

First of all thes look at the html:

<br />
<button class="btn btn-primary cleftButton pull-right" name="submit" type="submit"><br />
<i class="fa fa-save"></i><img id="loading" style="display: none;" src="img/loading.gif" alt="loading" width="15px" />   Save Data &amp; Photos<br />
</button><br />

So this html is a simple button with the type submit and it has am icon from fontAwesome and also a gif image which i’ve uploadad on the server, and refered the src at the right place. I also made sure the gif image is not too big and the display is set to non so it’s being hidden for the time being, also don’t forget the id because that’s where will refered to the js.

The js:

$(document).ready(function() {
  $("form").submit(function() {
    $('button[type=submit]').click(function () {

So we start with the document ready functions to the script can do it’s thing for sure. Then we make sure the form is being submited by using the submit function, of course this is just for frontend validation but I don’t think that the gif will show up with the backend validation fails. The next step is the click function by waiting till the button with the submit type is clicked using the click function. And at last, removing the style attribut from the loading image by triggering the id of the image, and hide the save icon from fontawesome.

That’s all, easy right.


Leave a Reply

Your email address will not be published.