title: Ajax form submit, validate and return success or fail
body: <p>Searched and browsed the forum and tried many examples of ajax and form submission but can't get anything close to work for what I am trying to achieve. I must admit I've been going in circles for days with this and need someone with a fresh pair of eyes.</p>
  
  <p>I have 2 pages:
  page1.php
  page2.php</p>
  
  <p>Using Google jquery/1.9.0/jquery.js and developing this locally.</p>
  
  <p>page1.php is as follows (I've omitted the head script and body/html tags for clarity)</p>
  
  <pre><code>$(document).ready(function() {
  $('#theForm').submit(function(){
  $.ajax({
        type: "POST",
        url: "page2.php",
        data: 'html',
       success: function(html){
          if(html == 'success'){
          $('#address').fadeOut('slow');
          $('#done').fadeIn('slow');
      }else if(html == 'fail'){
         alert('fail');
      }
  }
  });
  return false;
  });
  });
  
  &lt;div id="address"&gt;
  &lt;form action="page2.php" method="post" name="theForm"&gt;
  &lt;input name="checkname" type="text" id="checkname"&gt;
   &lt;input name="Proceed" type="submit" id="submit" value="Next Page" /&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;div id="done"&gt;
  That Worked!
  &lt;/div&gt;
  </code></pre>
  
  <p>Page2.php
  Has a mysql query that checks the database for the checkname and echoes 'success' or ' fail' depending upon the result. The query runs fine and is not showing any error.</p>
  
  <p>When the form is submitted page2.php loads and just shows 'success' in the browser.
  Firebug also shows success under both response and html. There are no errors within firebug.</p>
  
  <p>I basically want page1.php to stay and for the #address div to hide and the #done div to show when success is passed from page2.php</p>
  
  <p>Hope someone can help.</p>
  
  <p><strong>Update</strong>
  I tried this test page:</p>
  
  <p><strong>ajaxone.php</strong></p>
  
  <pre><code>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  $('#theForm').submit(function(){
  
  $.ajax({
  type: "POST",
  url: "ajaxtwo.php",
  data: 'html',
  success: function(html){
      if(html == 'success'){
          $('#address').fadeOut('slow');
      $('#payment').fadeIn('slow');
          alert('ok');
      }else if(html == 'fail'){
         alert('fail');
      }
  }
  });
      return false;
  });
  });
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
  #payment{
  visibility:hidden;
  }
  &lt;/style&gt;
  
  &lt;div id="address"&gt;
  &lt;form action="ajaxtwo.php" method="post" name="theForm" id="theForm"&gt;
  &lt;p&gt;
      &lt;input name="name" type="text" id="name"&gt;
  &lt;/p&gt;
    &lt;p&gt;
      &lt;input type="submit" name="submit" value="submit"&gt;
  &lt;/p&gt;
  &lt;/form&gt;&lt;/div&gt;
  &lt;div id="payment"&gt;Name is correct&lt;/div&gt;
  </code></pre>
  
  <p><strong>ajaxtwo.php</strong></p>
  
  <pre><code>print_r($_POST);
  if($_POST['name'] == 'rob'){
  echo 'success';
  }else{
  echo 'fail';
  }
  </code></pre>
  
  <p>Using the above firebug shows the following error:</p>
  
  <p>Array ( )
  Undefined index: name
  fail</p>
  
  <p>However, when I remove the ajax call the submit works and the data is passed.
  So, am I right to assume that if you do not specify the form variables within the ajax call nothing is posted to the next page?</p>
  
  <p><strong>Update 2</strong>
  Sorry I'm answering myself here.
  It does appear that you need to specify the form data to send within the ajax call.
  I've just added:</p>
  
  <pre><code>$('#theForm').serialize();
  </code></pre>
  
  <p>within the ajax call and now the form submits without an error.
  However, this still goes to ajaxtwo.php and does not show the success or fail on the ajaxone.php page.
  So my next stage is to get the success or fail to show on ajaxone.php</p>