title: jQuery ajax on multi-step form
body: <p>Hi everyone I'm trying to incorporate jQuery AJAX on my multi-step form so that it updates a certain div to the one on the process.php page but it keeps loading the results on a new page. How can I get it to update the div without refreshing the page?</p>
  
  <p>This is the jQuery code I'm using:</p>
  
  <pre><code>$.ajax({
      url: 'process.php',
      data: $('form[name="booking"]').serialize(),
      dataType: 'html',
      type: 'POST',
      success: function(data) {
  
          // this is the bit that needs to update the div
  
          $('#last-step').fadeOut(300, function() { $('#result').html(data).fadeIn(300);
      },
      complete: function (data) {
          // your code here
      },
      error: function (url, XMLHttpRequest, textStatus, errorThrown) {
          alert("Error: " + errorThrown);
      }
  });
  </code></pre>
  
  <p>This is the code for my multistep form: <a href="http://jsfiddle.net/xSkgH/47/" rel="nofollow">http://jsfiddle.net/xSkgH/47/</a>.</p>
  
  <p>Many thanks in the advance</p>