Check text field value with database - php

Question

I am trying to check inserting username is correct or not using jquery and php.. if username is not match with the value from database, it should be trigger an alert saying 'your user name is wrong'.
I tried this but I couldn't figure this out. When I type an username alert message triggering for each letter. But I need to check given value with database after entering in text field.
This is my Jquery -
// --- Check Username Availability for successful login --- //
$('#loginusername').keyup(function() {
var checkname=$(this).val();
var availname=remove_whitespaces(checkname);
if(availname!=''){
var String = 'username='+ availname;
$.ajax({
type: "POST",
url: "emailCheck.php",
data: String,
cache: false,
success: function(result){
var result=remove_whitespaces(result);
if(result == $('#loginusername').val()){
alert('Your entered Username is ok');
} else {
alert('Your entered Username is wrong');
}
}
});
}
});
This is from emailCheck.php
if(isset($_POST['username']) && !empty($_POST['username'])){
$userName = mysqli_real_escape_string($dbc, $_POST['username']);
$q = "SELECT username FROM userlogin
WHERE username = '$userName'";
$r = mysqli_query($dbc, $q);
$count = mysqli_num_rows($r);
$HTML='';
if($count == 1){
$HTML='username exists';
}else{
$HTML='';
}
echo $HTML;
}

Answer 1

Because you are using keyup event of textbox, use blur OR change event of textbox.
Edit
Change
if(result == $('#loginusername').val())
to
if(result == '')
Because you are sending blank result when no match found.

Answer 2

Well, in your JS, you're comparing what the user entered to what the PHP script returns:
result == $('#loginusername').val()
But the only thing your PHP script can return is the string 'username exists' or an empty string:
if($count == 1){
$HTML='username exists';
}else{
$HTML='';
}
Try just using alert(result).

Answer 3

var timer;
var time = 2000;
$('input').keyup(function() {
// when user stop typing for {time} second, do next function
timer= setTimeout(doSomething, time);
)
$('input').keydown(function() {
// when user continue typing clear timer
clearTimeout(timer);
)
function doSomething() {
}
try this

Answer 4

Change echo $HTML; to echo '{"success":"true", "usernameExists":"' + $count + '"}';
Then amend your Javascript to this
...
$.ajax({
type: "POST",
url: "emailCheck.php",
data: {username: availname},
cache: false,
success: function(result){
if(result.usernameExists == 1){
alert('Your entered Username is ok');
} else {
alert('Your entered Username is wrong');
}
}
});

Answer 5

instead of using keyup use 'onchange'

Answer 6

You can use the .blur trigger. http://api.jquery.com/blur/
// --- Check Username Availability for successful login --- //
$('#loginusername').blur(function() {
var checkname=$(this).val();
var availname=remove_whitespaces(checkname);
if(availname!=''){
var String = 'username='+ availname;
$.ajax({
type: "POST",
url: "emailCheck.php",
data: String,
cache: false,
success: function(result){
var result=remove_whitespaces(result);
if(result == $('#loginusername').val()){
alert('Your entered Username is ok');
} else {
alert('Your entered Username is wrong');
}
}
});
}
});

Answer 7

first of all you should change the event that your firing your check code. right now your firing at every keyup. I suggest change this to change
$('#loginusername').change(function() {
second there is an issue with your json response. In your php side your responding with an empty string when username is not found and an error message when the username is found. But your javascript side is expecting the return value to be the same as the username the user typed in the textbox when the string is available.
To meet this requirement lets change your php side of the code.
$HTML='';
if($count == 1){
$HTML='username exists';
}else{
$HTML=$_POST['username'];
}