Using Ajax with PHP to find a duplicate user and post an image to the page
I am trying to display an error message next to the username when there is a duplicate username. It will search through the database when the user starts entering a string. If there is no duplicate username, it will show a check mark next to the username.
Now the problem is that it was not showing the image but was displaying this message next to the test "Champ" test inconnu dans where where '
How can I fix this? Here is my code.
register.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video Game Rental - Sign up</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<SCRIPT type="text/javascript">
pic1 = new Image(16, 16);
pic1.src = "pic/loader.gif";
$(document).ready(function(){
$("#username").change(function() {
var usr = $("#username").val();
if(usr.length >= 1)
{
$("#status").html('<img src="pic/loader.gif" align="absmiddle">');
$.ajax({
type: "POST",
url: "check.php",
data: "username="+ usr,
success: function(msg){
$("#status").ajaxComplete(function(event, request, settings){
if(msg == 'OK')
{
$("#username").removeClass('object_error'); // if necessary
$("#username").addClass("object_ok");
$(this).html(' <img src="pic/tick.gif" align="absmiddle">');
}
else
{
$("#username").removeClass('object_ok'); // if necessary
$("#username").addClass("object_error");
$(this).html(msg);
}
});
}
});
}
});
});
//-->
</SCRIPT>
</head>
<body>
<div id="whitebox">
<form action="record.php" method="post" enctype="multipart/form-data" onSubmit="return myFunction(this);">
<table>
<tr>
<th colspan="3">CREATE AN ACCOUNT</th>
</tr>
<tr>
<td width="200"><div align="right"> </div></td>
<td width="100"><input name="username" type="text" id="username" placeholder="Username" size="20"></td>
<td width="400" align="left"><div id="status"></div></td>
</tr>
<tr>
<td width="200"><div align="right"> </div></td>
<td width="100"><input name="password" type="text" id="password" placeholder="Password" size="20"></td>
<td width="400" align="left"><div id="status"></div></td>
</tr>
<tr>
<td width="200"><div align="right"> </div></td>
<td width="100"><input name="cpassword" type="text" id="cpassword" placeholder="Confirm Password" size="20"></td>
<td width="400" align="left"><div id="status"></div></td>
</tr>
<tr>
<td colspan="3"><br> Profile picture:<br>
<input type="file" name="fileToUpload" id="fileToUpload"> </td>
</tr>
</table>
<script>
function myFunction() {
var pass1 = document.getElementById("password").value;
var pass2 = document.getElementById("cpassword").value;
var ok = true;
if(pass1 != pass2)
{
document.getElementById("password").style.borderColor = "#E34234";
document.getElementById("cpassword").style.borderColor = "#E34234";
ok = false;
}
return ok;
}
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
<input name="register" type="submit" class="register" id="register" value="Register">
</form>
<form action="index.php">
<input name="back" type="submit" class="register" id="back" value="Back">
</form>
</div>
</body>
</html>
check.php
<?php
if(isSet($_POST['username']))
{
$username = $_POST['username'];
$conn = mysqli_connect("localhost", "root", "", "videorental");
$query ="SELECT * FROM userinfo WHERE username = $username";
$sql_check = mysqli_query($conn, $query) or die(mysqli_error($conn));
if(mysqli_num_rows($conn, $sql_check))
{
echo '<br><font color="red">The nickname <STRONG>'.$username.'</STRONG> is already in use.</font>';
}
else
{
echo 'OK';
}
}
?>
source to share
To me it also looks like there is a syntax error in your request:
$query ="SELECT * FROM userinfo WHERE username = $username";
I am assuming you are using a string type like CHAR or VARCHAR for your username column in your userinfo table. You have to qoute your strings in SQL queries:
$query ="SELECT * FROM userinfo WHERE username = '$username'";
And since Rasclatt mentioned that you have to bind variables in sql due to the risk of sql injection, it is explained here:
http://php.net/manual/en/security.database.sql-injection.php
I suggest you use the prepared mysqli commands:
http://php.net/manual/en/mysqli.quickstart.prepared-statements.php
source to share