My aim is to utilize Ajax (Javascript + php) for checking user name availability when a user moves focus to another form field. The strange part is that my functions only work when I include some alert(), without them, the functions fail to operate.
Another peculiar observation is that alert(requestObject.readyState); only displays state 1. Ideally, it should show all states, or at least state 4 as well.
Here's my javascript code placed in the HTML page header:
var requestObject = false;
function funcReceiveData()
{
alert(requestObject.readyState);
if(requestObject.readyState == 4)
{
if(requestObject.status == 200)
{
var status = requestObject.responseText;
if(status == "ok")
{
document.getElementById('userValid').innerHTML = 'Valid user';
}
else
{
document.getElementById('userValid').innerHTML = 'Choose another username';
}
}
}
}
if (window.XMLHttpRequest)
{
requestObject = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
requestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function checkUser()
{
if(requestObject){
requestObject.open("POST", "addUser.php", true);
requestObject.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var user = document.getElementById('username').value;
var tobesent = "username=" + user;
requestObject.send(tobesent);
requestObject.onreadystatechange = funcReceiveData();
alert(tobesent);
}
}
This forms the body section of my HTML code:
<BODY>
<form method="POST" action="addUser.php">
<table>
<tr>
<td><strong>Username:</strong></td>
<td><input type="text" name="username" size="25" onblur="checkUser();" id="username"></td>
<td><i id='userValid'>bla</i>
</tr>
<tr valign="top">
<td><strong>Password:</strong></td>
<td><input type="password" name="password" size="25"></td>
</tr>
<tr valign="top">
<td><strong>Frist name:</strong></td>
<td><input type="text" name="Fname" size="25"></td>
</tr>
<tr valign="top">
<td><strong>Last name:</strong></td>
<td><input type="text" name="Lname" size="25"></td>
</tr>
<tr valign="top">
<td><strong>Address line 1:</strong></td>
<td><input type="text" name="address1" size="50"></td>
</tr>
[<!-- More form fields here -->]
</table>
</form>
Below is my PHP code for testing purposes before integrating with a database:
<?php
$user = $_POST['username'];
if($user == "Tiago")
echo("ok");
else
echo("Error");
?>
The page is hosted at:
Any insights into what might be causing this issue?