Ajax returning the error from server plus the header

Ajax returning the error from server plus the header

Hi, this probably has been posted before but after some hours of searching i couldn't find anything.
i have a form that collect data from the user and it is process using php before been inserted to the database.To process the form i created a page call upload.php. This page has a header footer and the form itself. I'm using ajax to collect the data coming from the server to let the user know the status. The problem that i'm having now if for some reason  there is an error in the form, let say a blank field, php will send the error and and the ajax call catch it  and post to the browser like it supposed to but not only posting the error back to the browser, it posting the header and footer on the same page. So the page end up with two headers and footers. I already had tried the follow.

  1. <?php 
  2. $ajax = isset($_SERVER['HTTP_X_REQUESTED_WITH'] ) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest';
  3. if(!$ajax){
  4. ?>
  5. <DOCTYPE HTML>
  6. <html>
  7. <head>
  8.                       <-- tittle, meta, links elements--> goes here
  9. </head>
  10. <body>
  11. <?php 
  12.      }// end of if
  13.              some ajax and non ajax content
  14. ?>
  15. </body>
  16. </html>

I tried the obout code between element in the page and still returning the head and footer with the error. The following code are from my jQuery side.

  2. $('#upload.php').submit(function(event){
  3.             var formInfo = $(this).serialize();
  4. $.post('upload.php',formInfo,function(data){
  5.    $('#errors').html(data);
  7. });//end of post
  9. event.preventDefault();
  10. });//end of submit

I hope someone can help me with this issue. Thanks in advance.