I want AJAX to go check the user name and password and if the user name and pass come back with "Login Unsuccessful" then do something AND (this is the most important thing) return false. The problem im running into is "onreadystatechange" uses a different function then the function i call from the <form onsubmit="return connect();> tag.
NOW, i know this is extreamly crude and does not work in IE but its just a sand box im playing around with so please excuse how crude it is b/c i know it does work and would never implement code like this live, im just learning at this point.
My question is how the heck do i make connect() return false if the function it called 4 times (onreadystatechange = responce comes back false?
CODE BELOW
Code:
function connect()
{
var xmlhttp = new XMLHttpRequest();
var user_name = document.getElementById('username').value;
var password = document.getElementById('password').value;
if(xmlhttp)
{
xmlhttp.open("GET","xxxxxxxxxxx.php?type=ajax&user_name="+user_name+"&password="+password+"&sid=<?php echo session_id()?>", true);
xmlhttp.onreadystatechange = response;
xmlhttp.send(null);
}
function response()
{
if(xmlhttp.readyState == 4)
{
if(xmlhttp.responseText == 'Login Unsuccessful')
{
document.getElementById('status').innerHTML = '<div align="center"><font face="Arial" size="2" color="red"><b>Incorrect User Name or Password<b></font></div>';
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"white\"><b>Incorrect User Name or Password<b></font></div>'",100);
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"red\"><b>Incorrect User Name or Password<b></font></div>'",200);
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"white\"><b>Incorrect User Name or Password<b></font></div>'",300);
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"red\"><b>Incorrect User Name or Password<b></font></div>'",400);
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"white\"><b>Incorrect User Name or Password<b></font></div>'",500);
setTimeout("document.getElementById('status').innerHTML = '<font size=\"2\" color=\"white\" face=\"arial\"><?php echo $company['name'];?>: Login</font>'", 5000);
return false;
}
}
}
}
That works for false but when i use this code it executes the alert(debugging) bt for some reason does not return true and allow the forum to be submitted...
Code:
function connect()
{
var xmlhttp = new XMLHttpRequest();
var user_name = document.getElementById('username').value;
var password = document.getElementById('password').value;
if(xmlhttp)
{
xmlhttp.open("GET","authenticate.php?type=ajax&user_name="+user_name+"&password="+password+"&sid=<?php echo session_id()?>", true);
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
if(xmlhttp.responseText == 'Login Unsuccessful')
{
document.getElementById('status').innerHTML = '<div align="center"><font face="Arial" size="2" color="red"><b>Incorrect User Name or Password<b></font></div>';
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"white\"><b>Incorrect User Name or Password<b></font></div>'",100);
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"red\"><b>Incorrect User Name or Password<b></font></div>'",200);
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"white\"><b>Incorrect User Name or Password<b></font></div>'",300);
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"red\"><b>Incorrect User Name or Password<b></font></div>'",400);
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"white\"><b>Incorrect User Name or Password<b></font></div>'",500);
setTimeout("document.getElementById('status').innerHTML = '<font size=\"2\" color=\"white\" face=\"arial\"><?php echo $company['name'];?>: Login</font>'", 5000);
return false;
}
else
{
alert('true');
return true;
}
}
}
xmlhttp.send(null);
}
return false;
}
NVM, i think i solved this by using a variable, Thanks.
Well crap, that's not the case, it sets the var after the check of the var in the <form onsubmit="connect();return (yesorno == 'yes')>
I have been working at this for hours using different functions different orders and I still just cant figure this out =/. I need a way to check the result of the AJAX query, & designate if its a true or false response to be checked with an "onSubmit" trigger... i really just stumpped at this point, any ideas (does not even need to be a solution just a direction you think i should go.)
onsubmit="return connect();" // The return value should always be false!
...
function connect()
{
var xmlhttp = new XMLHttpRequest();
var user_name = document.getElementById('username').value;
var password = document.getElementById('password').value;
if(xmlhttp)
{
xmlhttp.open("GET","authenticate.php?type=ajax&user_name="+user_name+"&password="+password+"&sid=<?php echo session_id()?>", true);
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
if(xmlhttp.responseText == 'Login Unsuccessful')
{
document.getElementById('status').innerHTML = '<div align="center"><font face="Arial" size="2" color="red"><b>Incorrect User Name or Password<b></font></div>';
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"white\"><b>Incorrect User Name or Password<b></font></div>'",100);
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"red\"><b>Incorrect User Name or Password<b></font></div>'",200);
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"white\"><b>Incorrect User Name or Password<b></font></div>'",300);
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"red\"><b>Incorrect User Name or Password<b></font></div>'",400);
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"white\"><b>Incorrect User Name or Password<b></font></div>'",500);
setTimeout("document.getElementById('status').innerHTML = '<font size=\"2\" color=\"white\" face=\"arial\"><?php echo $company['name'];?>: Login</font>'", 5000);
return false; // This does nothing, it just returns false when onreadystatechanges fires, but the false isn't caught by anything.
}
else
{
alert('true');
document.forms[0].submit() // This forces the form to submit if the query was successful
}
}
}
xmlhttp.send(null);
}
return false; // This will always stop the form from submitting directly.
}
As soon as the functions called in onsubmit="" returns, the form will either be submitted straight away, or not at all. The return statement in the onreadystatechange event returns out to the void because it's not called from onsubmit. It's called by the script engine without any link to the form or rest of the script. Like when you use a setTimout(), except for you don't know exactly when onreadystatechange will fire.
onsubmit="return connect();" // The return value should always be false!
...
function connect()
{
var xmlhttp = new XMLHttpRequest();
var user_name = document.getElementById('username').value;
var password = document.getElementById('password').value;
if(xmlhttp)
{
xmlhttp.open("GET","authenticate.php?type=ajax&user_name="+user_name+"&password="+password+"&sid=<?php echo session_id()?>", true);
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
if(xmlhttp.responseText == 'Login Unsuccessful')
{
document.getElementById('status').innerHTML = '<div align="center"><font face="Arial" size="2" color="red"><b>Incorrect User Name or Password<b></font></div>';
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"white\"><b>Incorrect User Name or Password<b></font></div>'",100);
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"red\"><b>Incorrect User Name or Password<b></font></div>'",200);
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"white\"><b>Incorrect User Name or Password<b></font></div>'",300);
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"red\"><b>Incorrect User Name or Password<b></font></div>'",400);
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"white\"><b>Incorrect User Name or Password<b></font></div>'",500);
setTimeout("document.getElementById('status').innerHTML = '<font size=\"2\" color=\"white\" face=\"arial\"><?php echo $company['name'];?>: Login</font>'", 5000);
return false; // This does nothing, it just returns false when onreadystatechanges fires, but the false isn't caught by anything.
}
else
{
alert('true');
document.forms[0].submit() // This forces the form to submit if the query was successful
}
}
}
xmlhttp.send(null);
}
return false; // This will always stop the form from submitting directly.
}
As soon as the functions called in onsubmit="" returns, the form will either be submitted straight away, or not at all. The return statement in the onreadystatechange event returns out to the void because it's not called from onsubmit. It's called by the script engine without any link to the form or rest of the script. Like when you use a setTimout(), except for you don't know exactly when onreadystatechange will fire.
Yeah i understand exactly what you mean, looks like there is just no way to do it, i have been plugging away at this for 5 hours trying a zillion different things and finnaly settled on a onkeyup trigger that sets a VAR and then when it submits it checks that var. Only problem is if the user types in the password too fast and hits return it bypasses the ajax but its ok b/c it still gets check, just with a page refresh is all.
Of course there is a way to do it, it should be no harder than the code modifications I posted. Why didn't they work? Any errors?
Best of all would be if you could post a link to an online example, that way it's much easier to see what the problem is.
Of course there is a way to do it, it should be no harder than the code modifications I posted. Why didn't they work? Any errors?
Best of all would be if you could post a link to an online example, that way it's much easier to see what the problem is.
yeah sorry I see now after getting some sleep, I did not put in the submit function, thus the successful match just went to false and did nothing on the submit. Thank you for this for help, this should work.
EDIT: haha its its not one thing its another...
This "works" so to say, but if only if i double tab the login button or the return key kinda fast. It wont submit if i just press them once. I'm not sure why I have to run the script 2 times ?!?!
Code:
function process()
{
if(xmlHttp)
{
if(xmlHttp.readyState == 0 || xmlHttp.readyState == 4)
{
var user_name = document.getElementById('username').value;
var password = document.getElementById('password').value;
xmlHttp.open("GET","authenticate.php?type=ajax&user_name="+user_name+"&password="+password+"&sid=<?php echo session_id()?>", true);
xmlHttp.onreadystatechange = handlestatechange;
xmlHttp.send(null);
return false;
}
else
{
setTimeout("process()", 1000);
}
}
}
function handlestatechange()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
if(xmlHttp.responseText == 'Login Successful')
{
document.forms[0].submit();
}
else
{
document.getElementById('status').innerHTML = '<div align="center"><font face="Arial" size="2" color="red"><b>Incorrect User Name or Password<b></font></div>';
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"white\"><b>Incorrect User Name or Password<b></font></div>'",100);
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"red\"><b>Incorrect User Name or Password<b></font></div>'",200);
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"white\"><b>Incorrect User Name or Password<b></font></div>'",300);
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"red\"><b>Incorrect User Name or Password<b></font></div>'",400);
setTimeout("document.getElementById('status').innerHTML = '<div align=\"center\"><font face=\"Arial\" size=\"2\" color=\"white\"><b>Incorrect User Name or Password<b></font></div>'",500);
setTimeout("document.getElementById('status').innerHTML = '<font size=\"2\" color=\"white\" face=\"arial\"><?php echo $company['name'];?>: Login</font>'", 5000);
}
}
}
comes back false?
Linear Mode
