Posting data to self using jquery
===

I am trying to post some form data to self with no success.My code is as follows

    <html><title>Post to self</title>
    <script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
    </script><script type="text/javascript">
    $(document).ready(function() {
    	$('.x-button').live("click",function()
        {  
    	$.ajax({
    	type: "POST",
      url: "self.php",
       data: $(".aj").serialize(),
      success: function(data){
          alert("Data Loaded:");
      }
     });
        });
    });
    
    </script>
    </head><body>
    <?php
    echo $_POST['firstname'];
    ?>
    <form name="input" action="" class="aj" method="post">
    <article>
    <label>Firstname</label><input type="text" name="firstname" value="Ed" class="x-input"/>
    </article>
    <article>
    <label>Lastname</label><input type="text" name="lastname" value="Doe" class="x-input"/>
    </article>
    <article>
    <label>City</label><input type="text" name="city" value="London" class="x-input"/>
    </article>
    <input type="submit" value="Update Options" class="x-button"/>
    </form>
    </body></html>

When using `<form name="test" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">` in plain php and html it works but i can't get it to work with jquery.