Question

I’m having some problem with implementing loader gif in this form my form is submiting to another page, the procesor page. This is the code:

form:

<form name="myform" id="myform" action="" method="POST">  
<!-- The Name form field -->
<div align='center'>


<form name="myform" id="myform" action="" method="POST">  
<!-- The Name form field -->
<font face='candara' size='3' color='#6382A1'>Ime ili prezime:</font>  
     <input type="text" name="name" id="name"  value="">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
 <script type="text/javascript">
$(document).ready(function(){
$("#myform").validate({
debug: false,
rules: {
name: "required",

},
messages: {
name: "Unesite podatke.",

},
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#myform").serialize(), function(data) {
                                $('#results').html(data);
                            });
                        }
                    });
                });
                </script>
                <style>
label.error { width: 250px; display: inline; color: red; font-family:candara;}
                    </style>


                <!-- We will output the results from process.php here -->
                <br><div id="results"></div>

So I’m wondering where and how to implement loader gif to be shown before search result?

this is the loader gif:

<!--LOADER!-->                              


<br><div id="loadingGif" style="display:none; background: url(slike_izgled/transparent_loader.png);" align="center"><img src='ajax-loader.gif'>
<br><font face='candara' size='3'><b>Pretražujem bazu podataka, molim pricekajte...</b></font></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>


<script>

$("form").submit(function(e) {
//e.preventDefault();

$("#loadingGif").show();
});

</script>



                <!--LOADER END!-->  

Answer 1

in your submitHandler use $.ajax instead of $.post, you will be able to use beforeSend

$.ajax({
    type : 'post',
    url : 'your url',
    data : 'your data',
    beforeSend : function(){
        $('#loadingGif').show();
    },
    success : function(data){
        $('#loadingGif').hide();
        // do your stuff here
    }

});