about jquery post method - ajax

Question

(please don't mark it as a duplicate before you read it through thanks ^_^)
I would like to implement a user registration form. Before the user clicks "submit", it calls a function check_username() which checks whether the username is available. If the function returns true, the form will be submitted otherwise not.
The form is like this:
<form action="register/sumbit" method="post" onsubmit="return check_username()">
...
</form>
To implement the check_username function, I adopted the method proposed in How to return the response from an AJAX call? , but it did not work for me. Maybe I misunderstood it. Here is my function:
function check_username()
{
return $.post(url, {data}); //post the input username to sever to see whether it exists. I omitted something for simplicity here
}
check_username().done(
function(data){
if(data=="true")//username doesn't exist
return true;
else if(data=="false")
return false;
}).fail(function(){});
Basically, I want check_username to return a boolean value, and the value (true or false) will determine whether the form is going to be submitted or not.
The result is that "check_username.done()" is implemented even if I don't click "submit" (so that it should not fire check_username) . And the the form is always submitted no matter whether the username exists or not. What I want is, if the username exists, check_username will return false so that the form will not be submitted.
could anyone tell me how to solve the problem? Thanks for your attention!

Answer 1

$.post doesn't return a boolean value, so the result (a jqXHR object) will be converted to a boolean and be true, and thus the form will submit every time.
Update:
Since the submit() method will trigger the onsubmit event even when it's invoked manually, you'll need to store the successful results from the $.post and add a condition in check_username().
One of many possible ways to accomplish this:
<form action="register/sumbit" method="post" onsubmit="return check_username()">
...
</form>
var isUsernameValid = false;
function check_username()
{
if(isUsernameValid){
return true;
}else{
$.post(url, data, successHandler);
return false;
}
}
...
// in your $.post().done() handler...
if(data=="true"){ //username doesn't exist
isUsernameValid = true;
$("form").submit();
}

Answer 2

It's never going to work that way. You're not going to get a synchronous return from an asynchronous operation.
What you can do is have the handler in check_username() submit the form on success.
<form action="register/sumbit" method="post" onsubmit="return check_username(this);">
...
</form>
function check_username(frm)
{
var myform = $(frm);
if (myform.data('checked')) // already checked username? go ahead and submit
return true;
// otherwise, start the username check then return false
// initialize url, data, etc.
$.post(url, data,
function(data) {
if (data == "true")
{
myform.data('checked', true);
myform.submit();
}
}
);
return false;
}