I'm trying to display an error message next to the username input when there is a duplicate username. It will search through the database when user start to key in a string. If there isn't any duplicate username, it will show a tick beside the username input.
Now the problem is it didnt show the image but show this message beside the input 'Champ 'test' inconnu dans where clause'
How can i fix this? Here's 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';
}
}
?>
