Question

I have a home page that contains a texfield that reads the user input, sends the value of whatever is typed in and sends it to another page where the search will happen and display the search results.

 <div>
     <form action="****.jsp" method="get" id="search-id">
          <input type ="text" name = "search" id="search" size="70"/><br>
          <br />
          <input type="Submit" value="Search"  class="button rounded"> 
     </form>
     <br />
     <br />
     <br />
</div>

But the thing is that it takes some time before the actual second page shows up, therefore I wanted to make a little loading gif to appear while waiting for that page to actually load up. I have a gif file ready to use, but I can’t figure out how to implement it into the website so that it would show up after I click on the search button.

I’m very new to HTML/JS and I been searching for a possible way for days. Is this possible at all?

Answer 1

Add a submit event handler to your form, that makes the animated gif appear and doesn’t prevent the form submission. Example with JQuery:

$('#search-id').submit(function() {
    $('#animated-gif').show();
});

assuming you have the animated gif hidden somewhere in the page:

<img src="..." style="display: none;" id="animated-gif"/>