Подтверждение формы без перезагрузки страницы

Привет, %username%!
В этом примере я покажу тебе, как при помощи аякс можно создать форму, которая при подтверждении данных не будет перезагружать страницу!

JS:
Обратите внимание на dataString

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
$(function() {
$(".submit").click(function() {
var name = $("#name").val();
var username = $("#username").val();
var password = $("#password").val();
var gender = $("#gender").val();
var dataString = 'name='+ name + '&username=' + username + '&password=' + password + '&gender=' + gender;

if(name=='' || username=='' || password=='' || gender=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "join.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
}); </script>

HTML:
Сама форма:

<form method="post" name="form">
<ul><li>
<input id="name" name="name" type="text" />
</li><li>
<input id="username" name="username" type="text" />
</li><li>
<input id="password" name="password" type="password" />
</li><li>
<select id="gender" name="gender">
<option value="">Пол</option>
<option value="1">Муж</option>
<option value="2">Жен</option>
</select>
</li></ul>
<div >
<input type="submit" value="Submit" class="submit"/>
<span class="error" style="display:none"> Ошибка! Введите норм данные</span>
<span class="success" style="display:none"> Регистрация успешно завершена</span>
</div></form>

join.php
Именно этот код будет обрабатываться посредствам aJax. Т.е. при нажатии на кнопку 'submit' будет выполненно следуещее:

if($_POST){
$name=$_POST['name'];
$username=$_POST['username'];
$password=$_POST['password'];
$gender=$_POST['gender'];
mysql_query("*ваш sql запрос..");
}else { }
?>