I thought it was time that I made a simple post on using AJAX. This is a very easy script for you to develop from. The main thing that you want to keep in mind is that you have to put the following script into a file called test.php.

Further Instructions for Mysql

You will see that this script is calling for a config file for the connection to the database. It is looking for a user table and a user row to call from. If you want to know how to create tables rows and databases see this post. CREATE A NEW TABLE IN A MYSQLI DATABASE.

<?php
if(isset($_POST["unamecheck"]) && $_POST["unamecheck"] != ""){
include_once 'config.php';
$username = $_POST['unamecheck'];
$sql_uname_check = $con->query("SELECT user FROM user WHERE user='$username' LIMIT 1") ;

$uname_check = $sql_uname_check->num_rows;

if ($uname_check < 1) {
echo '<strong>' . $username . '</strong> is OK';
exit();
} else {
echo '<strong>' . $username . '</strong> is taken';
exit();
}
}
?><script>
function checkname(){
var status = document.getElementById("unamestatus");
var u = document.getElementById("uname").value;
if(u != ""){
status.innerHTML = 'checking...';
var hr = new XMLHttpRequest();
hr.open("POST", "test.php", true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
status.innerHTML = hr.responseText;
}
}
var v = "unamecheck="+u;
hr.send(v);
}
}
</script><input id="uname" maxlength="250" name="uname" type="text" /> <span id="unamestatus"></span>