title: AJAX Form how to display loading gif
body: <p>I have this AJAX submission form written with the jQuery validation plugin. It all works perfectly but I've noticed that people are re-submitting the form before the script is finished and it's causing duplicate records in our database. Here is the code I have so far:</p>
  
  <pre><code>$(document).ready(function(){
  $("#myform").validate({
      debug: false,
      rules: {
          fname: {required: true}, 
          sname: {required: true}, 
          sex: {required: true}, 
      },
      messages: {
          fname: {required: "- Field required."},
          sname: {required: "- Field required."},
          sex: {required: "- Field required."},
      },
      errorPlacement: function(error, element) {
          if ( element.is(":radio") ) {
          error.appendTo('.radioError');
          }
          else {
          error.insertAfter( element );
          }
      },
      submitHandler: function(form) {
          $.post('process_participant.php', $("#myform").serialize(), function(data) {
              $('#results').html(data);
          });
          }
      });
  });
  </code></pre>
  
  <p>Can anyone explain to me how to augment this code to put a loading gif into my results div until my script is finished and the loading gif is replaced with my actual results? I think it will discourage people from double clicking the submit button. </p>