I have created an form validation using ajax/php. Each text box is validated using a different file e.g. username_ajax.php. Once the information has been checked to be ok it is then echoed on screen ("Username ok"). I cannot figure out how to allow the user to only press the submit button once all text boxes are 'ok'. Any help will be appreciated, Thanks.
My code (Sorry its long):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sign-up</title>
</head>
<script type="text/javascript">
function username(username)
{
var httpRequest;
make_request()
function stateck()
{
if(httpxml.readyState==4)
{
document.getElementById ("user_div").innerHTML=httpxml.responseText;
}
}
httpxml.onreadystatechange=stateck;
user_url="ajax_username.php?username=" + username.value;
httpxml.open("GET",user_url,true);
httpxml.send(null);
}
function email(email)
{
var httpRequest;
make_request()
function stateck()
{
if(httpxml.readyState==4)
{
document.getElementById("email_div").innerHTML=httpxml.responseText;
}
}
httpxml.onreadystatechange=stateck;
email_url="ajax_email.php?value=" + email.value;
httpxml.open("GET",email_url,true);
httpxml.send(null);
}
function confirm(password,conpassword)
{
var httpRequest;
make_request()
function stateck()
{
if(httpxml.readyState==4)
{
document.getElementById("conpass_div").innerHTML=httpxml.responseText;
}
}
httpxml.onreadystatechange=stateck;
conpassword_url="ajax_password.php?password=" + password.value + "&conpassword=" + conpassword.value;
httpxml.open("GET",conpassword_url,true);
httpxml.send(null);
}
</script>
<body>
<div id="user_div"></div>
<div id="conpass_div"></div>
<div id="email_div"></div>
<form id="form" name="form" method="post" action="">
<label>Username<br />
<input type="text" name="username" id="username" onBlur="check_username(username)">
<br />
<br />
</label>
<label>Password<br />
<input type="password" name="password" id="password" onBlur="check_confirm (password,conpassword);">
</label>
<label><br />
<br />
Confirm Password<br />
<input type="password" name="conpassword" id="conpassword" onBlur="check_confirm(password,conpassword);">
<br />
<br />
</label>
<label>Email<br />
<input type="text" name="email" id="email" onblur="check_email(email)" />
<p>
<p>
<label>
<input type="submit" name="button" id="button" value="Submit" onclick="return false;" />
</label>
</p>
</form>
</body>
</html>