AJAX wait for load

[kensuke155]

I'm having a little trouble with a registration form on a website I'm developing. When the user submits the form I'm using AJAX & PHP to check and see if a user has already registered with that username or email. This works just fine. The part that I'm stuck on is the validation. If all other conditions are met (name, address, terms, etc.) the form is submitted even if the validation for the username and email will not pass. I think it's because its not loading this information quick enough so when the validation function checks for errors it finds none. I've tried putting a while(!pass) argument in the function which waits for the AJAX to complete its request. However this stops the script. here's a mock up of what i've got.

function loadurl(dest) {
try
{
xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
xmlhttp.onreadystatechange = triggered;
xmlhttp.open("GET", dest);
xmlhttp.send(null);
}

function triggered()
{
if ((xmlhttp.readyState === 4) && (xmlhttp.status === 200))
{
switch(eval(xmlhttp.responseText))
{
case 0:
{
err+=2;
break;
}
case 1:
{
err++;
break;
}
case 2:
{
err++;
break;
}
}
pass = true;
}
}

function validate()
{
err = 0;

if(!emailValidate) err++;
if(!emailConfirmValidate) err++;
if(!usernameValidate) err++;
if(!firstNameValidate) err++;
if(!lastNameValidate) err++;
if(!termsValidate) err++;

loadurl('?un='+username.value+'&em='+email.value);

if(err) return false;
}

anything will help! thanks

[whoisgregg]

How are you calling the validate() function?

Most of the time the problem with these is forgetting to put a "return" before the function call:

<form action="" method="" onsubmit="return validate();">

And welcome to WebmasterWorld, kensuke155!

[kensuke155]

That's exactly how I call it. I figured out what's wrong but i can't find a solution. The xml is loading asynchronously so while its doing the database lookup the javascript validate function is still executing. It exits the function with no errors before the ajax request can even return an error. I've tried a lot of things but they all result in the page hanging. =(

[kensuke155]

**FIXED**

Took me a while to figure it out. So I gave up on trying to stop the javascript from running. I read that doing xmlhttprequest synchronously was risky, but i figured that the file was small enough that it would work. So I changed it to load that way but it would never display the result. I finally figured it out... it was still waiting for a callback on the readyState, but the callback wasn't being called (duh). so i put the code from the call back after xmlhttprequest.send(null). It finally works.

[whoisgregg]

Glad you got it sorted. :)