I have a registation form where I check with AJAX response onkeyup if the username or email allready exists in my database.
You can see how I check it here:
$query = $_GET ['query'];
$field = $_GET ['field'];
if ($field == "username")
{
$check = $db->prepare("SELECT * FROM users WHERE username = :query");
$check->bindParam(':query', $query);
$check->execute();
$count = $check->rowCount();
if ($count > 0)
{
echo '<font color=red>Username already exists</font>';
}
else
{
echo '<font color=green>Username avalable</font>';
}
}
if ($field == "email")
{
$check = $db->prepare("SELECT * FROM users WHERE email = :query");
$check->bindParam(':query', $query);
$check->execute();
$count2 = $check->rowCount();
if ($count2 > 0)
{
echo '<font color=red>Email already exists</font>';
}
else
{
echo '<font color=green>Email avalable</font>';
}
if (!filter_var($query, FILTER_VALIDATE_EMAIL)) {
echo '<font color=red><br />Please enter a valid Email</font>';
}
else {
echo '<font color=green><br />Valid email</font>';
}
}
I want to create another if statement where, if there are any errors, then it should disable the submit button. I don't wanna add the disable to each of the statements I already have, cause then I could end with a situation like this:
I enter an email that exists and it disables the submit button. I then enter a correct username and it enables the submit button again, even though the email is still wrong.
So I wan't to create something like this:
if ($count > 0 || $count2 > 0)
{
echo '<script id="cb" type="text/javascript">document.getElementById("regr_btn").disabled=true</script>'
}
else
{
echo '<script id="cb" type="text/javascript">document.getElementById("regr_btn").disabled=false</script>'
}
But I cannot acess my counts since they are not global. Can any of you give me an idea on how I could accomplish this?
Don't worry. I'm also checking for errors when the form is submitted. I know that a user can easily activate the submit button themselves.
Also, please let me know if I need to provide more of my code.
Edit:
Validation function:
<script type='text/javascript'>
function validate(field, query)
{
xmlhttp = new XMLHttpRequest(); // Creating Object
xmlhttp.onreadystatechange = function() // Checking if readyState changes
{
if (xmlhttp.readyState!=4 && xmlhttp.status==200) // Validation Under Process
{
document.getElementById(field).innerHTML = "Validating..";
}
else if (xmlhttp.readyState==4 && xmlhttp.status==200) // Validation Completed
{
document.getElementById(field).innerHTML = xmlhttp.responseText;
}
else // If an error is encountered
{
document.getElementById(field).innerHTML = "Unknown Error Occurred. <a href='index.php'>Reload</a> the page.";
}
}
xmlhttp.open("GET","check.php?field="+field+"&query="+query, false);
xmlhttp.send();
}
</script>
And the code in the first codeblock is inside the check.php file
Email and username fields in my form:
<div id='username'></div>
<input type="email" name="email" placeholder="Email" required="required" onkeyup="validate('email', this.value)"><br>
<div id='email'></div>
<input type="password" name="password" placeholder="Password" required="required" onkeyup="validate('password', this.value)"><br>