I'm trying to process a basic form with ajax and although it's being processed I always get "data undefined" when I try to update a paragraph with what's been submitted. What am I missing?

process.php :

1. <p>
   <?php
   echo $_POST['name'];
   echo $_POST['lastname'];
   ?>
   </p>
   
   
   
   
   

form:

1. <form action="" method="post" id="former">
       <label for="name">Name</label><input type="text" name="name" value="" id="name">
       <label for="lastname">Last Name</label><input type="text" name="lastname" value="" id="lastname">    
       <p><input type="submit" value="Continue &rarr;" id="submit" /></p>
   </form>
   <p id="green"></p>
   
   
   
   
   

jquery

1. $(document).ready(function() {
               
               $('#former').submit(function() {
                   $.ajax({
                     url: 'process.php',
                     type: 'POST',
                     dataType: 'html',
                     data: $(this).serialize(),
                   
     complete: function() {
                       
     },
                   
     success: function(data) {
               $('#green').html(data);
    },
                   
     error: function() {
                       //called when there is an error
     }
                   });
                   
               });
               
           });
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

Any tips appreciated!