php Form, Validation & Preview in same page

php Form, Validation & Preview in same page

Hi , 

I already build a form as php_self , i want to make it validation and preview on same page ; 1 file only .

The source code :

  2. <?php
  3. // validate data 
  4. $fnameErr = $lnameErr  = "";

  6. if ($_SERVER["REQUEST_METHOD"] == "POST") {    
  7.   if (empty($_POST["fname"])) {
  8.       $fnameErr = "First name is required";
  9.     }
  10. elseif (preg_match("/^[A-Z][a-zA-Z -]+$/", $_POST["fname"]) === 0) {
  11.   $fnameErr = "First name must contain letters and spaces only";
  12. }
  13. else  {
  14. $fname = $_POST["fname"];
  15. } 
  16.     if (empty($_POST["lname"])) {
  17.         $lnameErr = "Last name is required";
  18.     }
  19. elseif (preg_match("/^[A-Z][a-zA-Z -]+$/", $_POST["lname"]) === 0) {
  20.   $lnameErr = "Last name must contain letters and spaces only";
  21. }
  22.     else {
  23.         $lname = $_POST["lname"];
  24.     }
  25.    
  26.    }



  30. ?>
  31.    
  32. <title>Untitled 1</title>
  33. <style type="text/css">
  34. .style1 {
  35.     border-collapse: collapse;
  36.     border: 1px solid #000000;
  37.     background-color: #99FF99;
  38. }
  39. .style3 {
  40.     text-align: center;
  41.     font-size: large;
  42. }
  43. .style4 {
  44.     color: #0000FF;
  45. }
  46. .style5 {
  47.     text-align: center;
  48. }
  49. .style6 {
  50.     background-color: #FEFECB;
  51. }
  52. .error {
  53.     color: #FF0000;
  54. }
  55. </style>
  56. <script src="jquery-1.10.2.js"></script>
  57. </head>
  58. <body>
  59. <table style="width: 600px" cellspacing="0" cellpadding="25" align="center" class="style1">
  60.     <tr>
  61.     <form method="POST"
  62.  action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">     <td>
  63.         <div class="style3">
  64.             :: <strong><span class="style4">STUDENT INFORMATION</span> </strong>
  65.             ::</div>
  66.         <table style="width: 100%">
  67.                     </table>
  68.         <table style="width: 100%" class="style6" cellpadding="5">
  69.             <tr>
  70.                 <td style="height: 30px; width: 106px">First Name&nbsp;</td>
  71.                 <td style="width: 14px; height: 30px;" class="style5"><strong>:</strong></td>
  72.                 <td style="width: 204px; height: 30px;"><input name="fname" type="text" value="<?php echo htmlspecialchars($fname);?>">&nbsp;</td>
  73.                 <td style="height: 30px"><span class="error"><?php echo $fnameErr;?></span></td>
  74.             </tr>
  75.             <tr>
  76.                 <td style="width: 106px">&nbsp;</td>
  77.                 <td style="width: 14px" class="style5"><strong></strong></td>
  78.                 <td style="width: 204px">&nbsp;</td>
  79.                 <td>&nbsp;</td>
  80.             </tr>
  81.             <tr>
  82.                 <td style="width: 106px">Last Name</td>
  83.                 <td style="width: 14px" class="style5"><strong>:</strong></td>
  84.                 <td style="width: 204px"><input name="lname" type="text" value="<?php echo htmlspecialchars($lname);?>"></td>
  85.                 <td><span class="error"><?php echo $lnameErr;?></span></td>
  86.             </tr>    
  87.         </table>
  88.         </td>
  89.         </form>
  90.     </tr>
  91. </table>
  92. </body>
  93. </html>


  96. --------this code below i want to become as preview page ---------
  97. <body>

  99. <table style="width: 600px" cellspacing="0" cellpadding="25" align="center" class="style1">
  100.   <tr>
  101.     <td>
  102.       <div class="style3">
  103.         :: <strong><span class="style4">STUDENT INFORMATION</span> </strong>
  104.         ::</div>
  105.       <table style="width: 100%">
  106.       </table>
  107.       <table style="width: 100%" class="style6" cellpadding="5">
  108.         <tr>
  109.           <td style="height: 27px; width: 106px">First Name&nbsp;</td>
  110.           <td style="width: 14px; height: 27px;" class="style5"><strong>:</strong></td>
  111.           <td style="width: 204px; height: 27px;">echo $fname </td>
  112.           <td style="height: 27px"><span class="error"></span></td>
  113.         </tr>
  114.         <tr>
  115.           <td style="width: 106px">&nbsp;</td>
  116.           <td style="width: 14px" class="style5"><strong></strong></td>
  117.           <td style="width: 204px">&nbsp;</td>
  118.           <td>&nbsp;</td>
  119.         </tr>
  120.         <tr>
  121.           <td style="width: 106px">Last Name</td>
  122.           <td style="width: 14px" class="style5"><strong>:</strong></td>
  123.           <td style="width: 204px"> echo $lname &nbsp;</td>
  124.           <td><span class="error"></span></td>
  125.         </tr>
  126.         <tr>
  127.           <td style="width: 106px">&nbsp;</td>
  128.           <td style="width: 14px" class="style5"><strong></strong></td>
  129.           <td style="width: 204px">&nbsp;</td>
  130.           <td>&nbsp;</td>
  131.         </tr>
  132.         <tr>
  133.           <td style="width: 106px">&nbsp;</td>
  134.           <td style="width: 14px" class="style5"><strong></strong></td>
  135.           <td style="width: 204px">&nbsp;</td>
  136.           <td>&nbsp;</td>
  137.         </tr>
  138.       </table>
  139.     </td>
  140.   </tr>
  141. </table>
  142. </body>
  143. </html>

I already ask , google but found nothing . Any feedback really appreciate . Thank you