title: jQuery submit form without reloading page
body: <p>I'm not very familiar with jQuery. I'm trying to make a form that is submitted in the background without reloading page.</p>
  
  <p>I have a hidden div which shows and hides on click, inside the div there's a form. </p>
  
  <p>I have two problems:</p>
  
  <p>1) When the form validation fails, the form is still submitted. I tried to put validation and submission codes in condition <code>if(validation == valid) { $.ajax.... }</code> but it does not work properly.</p>
  
  <p>2) After the form is submitted the div automatically hides, so successful message cannot be seen.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>$().ready(function() { 
  
      // Validate the form when it is submitted, using validation plugin.
      var validator = $("#contactform").validate({
          errorContainer: container,
          errorLabelContainer: $(),
      onkeyup: false,
      onclick: false,
      onfocusout: false,
      errorPlacement: function (error, element) { 
  error.insertBefore(element);    
  }   
      });
  });
  
  $(function() {
  
      //This submits a form
  $('input[type=submit]').click(function() {
          $.ajax({
              type: "POST",
              url: "contact.php",
              data: $("#contactform").serialize(),
              beforeSend: function() {
                  $('#result').html('&lt;img src="loading.gif" /&gt;');
              },
              success: function(data) {
                  $('#result').html(data);
              }
  
          })
      })
  })
  
  
  //This shows and hides div onclick
  $(document).ready(function(){   
          $(".slidingDiv").hide(); 
          $(".show_hide").show(); 
      $('.show_hide').click(function(){ 
      $(".slidingDiv").slideToggle(); 
      });
  }); 
  </code></pre>