Ajax return false to form - php

Question

Hi I'm looking to check my database when a user signs up to my website to make sure that the username they chose doesn't already exist and if it does let them know. My code below isn't working though the returns in the ajax don't seem to be returned to my form no matter what i do and the form always submits. Why is this happening? Thank you for any help
HTML
<form name="signup" action="Test1.php" onsubmit="return checkUser();" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
Javascript
<script type="text/javascript" src="jquery-1.7.1.min.js"/></script>
<script type="text/javascript">
function checkUser(){
var userV = document.signup.user.value;
$.ajax({
url: "Test.php",
type: "POST",
data: {user:userV},
success: function (response) {
if(response=="0"){
//Username already exists notify user
return false;
}else{
return true;
}
}
});
}
</script>
Test.php
<?PHP
$user = $_POST['user'];
if($user=="test"){
die("0");
}else{
die("1")
}
?>
Test1.php
<?PHP
echo "Form submitted";
?>

Answer 1

You put the return value inside the success callback of your ajax call, whose execution is delayed till server answers.
onsubmit="return checkUser();" expects a true or false value in checkUser() function:
function checkUser(){
if( stuff )
return true;
else
return false;
}
Anyway this is an overall bad approach because it relies on intrusive javascript. A better solution would be moving all client side logic out of markup:
HTML
<form name="signup" action="Test1.php" method="get">
<label for="_user">Username:</label><input type="text" name="user" id="_user"/>
<input type="submit" value="Submit" />
</form>
JS
<script>
// wrapping the code in a $(function(){ ... }); call delays its execution till document is loaded
$(function(){
$('form[name="signup"]').on('submit', function(event){
// this prevents browser from actually following form url
event.preventDefault();
// a reference to the form to get used inside ajax callback
var form = this;
$.ajax({
url: $(form).attr('action'),
type: "POST",
data: {user:$(form.user).val()},
success: function (response) {
if(response=="0"){
alert('User exists!');
}else{
alert('User does not exist!');
}
}
});
});
});
</script>
Where the alerts would be a proper message to the user, or a more sophisticate validation - this is just for example's sake.

Answer 2

You return false in the callback, thats too "late", as it will be called when the request is done. Think about adding an explicit e.preventDefault() or return false to your function. Currently, it will return undefined, as you have defined the return statement in the "inner" function.
Of course you will then need to manually navigate to the target page.
Or set the async parameter of the $.ajax() call explictly to false.