Azhar Azhar - 1 year ago 39
jQuery Question

How do i hide div elements and show an animation gif when the search button is clicked until the next page is loaded

I wanna hide the div having class "ToBeHiddenWhenSubmitted" and show an animation gif until the next page is loaded completely.

<div class="front-paper" >
<div class="container">

<form name="frm" method="GET" action="new.php" onsubmit="return validateForm()" >
<div class="input-append">
<input class="span6 input-custom" type="text" name="search" value="" style="min-width:10px;"><br><br>

<div class="ToBeHiddenWhenSubmitted">
<select class="btn btn-custom" name="view" id="views" data-native-menu="false" style=" height:42px; width:258px;">
<option value="linkfile">Show Files</option>
<option value="links">Show Links</option>
<button type="submit" value="Search" id="clickme" class="btn btn-custom">Search</button>



Answer Source

This should be as trivial as using .show() and .hide() on your targets within your existing validateForm function.

function validateForm (event) {
   // whatever you already do in this function

If you are wondering how to continue the animation on the next page, you will have to do that from that page. To do that, hide the form or whatever on your next page by default and show the animated gif by default, then add an ready handler to swap their visibility:

$(function() {