This tutorial will show you how to make an AJAX feature which will allow you to tell the user if the username they entered is still available, without them having to reload the page. This tutorial will not show you how to make a user system, but will show you how you can add onto an existing one, so that users can almost instantly be informed about the status of the username they want.
Now, if you are not adding this to an existing registration system, you will have to setup a database to hold the usernames, for this tutorial. So first, create a database and then run this script below (fill in your connection information). It will create a simple table in the database and add a few usernames which you can change if you want, they are just being entered as an example. Save this as create.php, run it once and then delete it.
 |
<?php
mysql_connect ('localhost', 'USERNAME', 'PASSWORD');
mysql_select_db('DATABASE');
mysql_query("CREATE TABLE `users` (
`username` varchar(20) NOT NULL
) TYPE=MyISAM;");
mysql_query("INSERT INTO `users` VALUES('username');");
mysql_query("INSERT INTO `users` VALUES('example');");
?>
|
 |
Code Breakdown:
mysql_connect ('localhost', 'USERNAME', 'PASSWORD'); - This connects to MySQL, make sure you change the username and password to your information. (also change the localhost, if required)
mysql_select_db('DATABASE'); - This selects the database, make sure you fill it in with your database name that you made for this tutorial.
mysql_query("INSERT INTO `users` VALUES('username');"); - You can add more of these lines and/or change the value, this just make usernames in the database when we test our script at the end of the tutorial.
This script will be an example of a form field where the user would type in the username they want. Save this as form.php
|
<script type="text/javascript">
function toggle_username(userid) {
if (window.XMLHttpRequest) {
http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
http = new ActiveXObject("Microsoft.XMLHTTP");
}
handle = document.getElementById(userid);
var url = 'ajax.php?';
if(handle.value.length > 0) {
var fullurl = url + 'do=check_username_exists&username=' + encodeURIComponent(handle.value);
http.open("GET", fullurl, true);
http.send(null);
http.onreadystatechange = statechange_username;
}else{
document.getElementById('username_exists').innerHTML = '';
}
}
function statechange_username() {
if (http.readyState == 4) {
var xmlObj = http.responseXML;
var html = xmlObj.getElementsByTagName('result').item(0).firstChild.data;
document.getElementById('username_exists').innerHTML = html;
}
}
</script>
<input id="username" type="text" name="username" onchange="toggle_username('username')" /><br />
<div id="username_exists" style="font-size: 11px;font-weight: bold;color:#FF3300"> </div>
|
|
discuss this topic to forum
