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:

</p>
<p>$(document).ready(function() {<br />
$("form").submit(function() {<br />
$('button[type=submit]').click(function () {<br />
$('#loading').removeAttr("style");<br />
$(".fa-save").hide();<br />
});<br />
});<br />
});</p>
<p>

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.

13/04/2018

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 […]
11/04/2018

Multible upload progress bars

This tutorial shows how to make multiple uploading progress bars, inspired by Pretty Printed video, on how to make the progress bar. In my case I needed it […]
05/04/2018

Frontend Password validation with Regex

To do a frontend password validation with Regex we need 2 things, a form with a password field, and a js that does the job. the […]
04/04/2018

show chosen image immediately.

In this tutorial I’ll show you a small Javascript code which you can use to add an image and show it immediately. First things first. Adding […]
23/03/2018

store image in folder and get them to the frontend

In this Article we will see how we are able to add images or other files to our projects folder and show them to the frontend. […]