auto fill remeaining fields from the database

[ajax_begins]

I want to automatically genereate the form posts field and the joindate field from the database when the user enters the username and presses tab or some button called fetch in the form. Here is my code so far..i am new to ajax ..so need some help..

<form <form action="<?php echo $PHP_SELF;?>"  method="POST">
<fieldset>
<legend>Form</legend>
<label for="username">Username: </label>

<input type="text" id="username"  name="username" /> 

<input type="text" id="posts" name="posts"  size="20"/></p>

<input type="text" id="joindate" name="joindate"  size="20"/></p>

<p><input type="submit" name="submitBtn" value="Submit" /></p>

<script type="javascript/text>
var name = $('.username').val();
$.ajax({
method: "GET",
url: "http://url.com/test/autofill.php",
dataType: 'json',
data: {
username: username
}).success(function( responseObject ) {
// assuming you have an array of stuff like name, id, email, etc.
// now i populate another field from the ajax response
$('.posts').val( responseObject.posts );

//connect to database
$name = $_GET['username'];
$return = mysql_query("SELECT * FROM user WHERE username = '$name' LIMIT 1");
$rows = mysql_fetch_array($return);
$formattedData = json_encode($rows);
print $formattedData;