Information Technology Reference
In-Depth Information
With the back-end complete, we'll now build a very simple form that will check the
username as the person types, and tell him or her if the desired name is available.
We'll accomplish this with the code in Listing 12-8.
Listing 12-8.
The checkname.html Page
<html>
<head>
<title>Registration Page</title>
<script type="text/javascript">
function checkusername($name) {
if (window.XMLHttpRequest) {
// Modern browsers use this type of request
request = new XMLHttpRequest();
} else {
// Old Microsoft Browsers use this type!
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.onreadystatechange=function() {
if ( request.readyState == 4 && request.status == 200) {
document.getElementById("theres").innerHTML = request.response;
}
}
request.open("GET","check_name.php?u=" + $name,true);
request.send();
}
</script>
</head>
<body>
<form name="theform">
<span style="font-family: Helvetica,Arial,sans-serif;">Register!<br>
<div id="theres">
<h2>...</h2>
</div>
<input type="text" name="un" onkeyup="checkusername(this.form.un.value)">
</span></form>
</body>
</html>
You'll notice that, like last time, we're building off of the same format we used with
word-of-the-day. This time we've changed the function to accept an argument (the
name we need to check), and we've changed the button to a text field. This text field
checks the name every time a key is released (the
onkeyup
event), and the result updates.
When loaded, the page looks similar to Figure 12-16.
Figure 12-16.
The check username page
