auto fill fields from the database

I have a simple form right now:

<form action='<? echo $PHP_SELF;?>' method='POST'>
Username:<input type='text' name='username'><br>
Email:<input type='text' name='email'><br>
Posts:<input type='text' name='posts'><br>
Joindate<input type='text' name='join'><br>
<input type="submit" value="Submit" />
</form>

What I need is, when the user fills his username and does one of the following:

1.presses tab

2.Presses enter

3.clicks on a fetch button(fetch button does not exist now,i would like to know how to create it using javascript or anything else that suits my criteria)

Once he does any of the above it should automatically generate the remaining fields from the database.

The query would look like this:

$qry=mysql_query("SELECT * from user where username =`$_POST['username']`");

$row=mysql_fetch_assoc('$qry);

echo $row['posts] and so on..

After it is autogenerated he can edit the fields and submit to update the database fields.

Please move this post if I am in the wrong forum.

1. it's not a good idea to use php short tags (<? ?>), instead, use php full tags (<?php ?>)

2. php_self

3. tab and enter are defaulted to perform given tasks by the browser, to my knowledge, you cannot defer these tasks.

4. the "fetch" button you could make work, you will need a button, upon being clicked would call on ajax to grab the query from the specified php page and handle the response accordingly.

Could you please provide me a link or tutorial where this can be done?

Here is what I have done so far. I need lil bit more help in how to populate the other fiels when a user enters a username.

<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="hidden" id="userid" name="userid" />

<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;

Can someone move this to the AJAX forum? I might get little help over there..