New Topic/Question
Reply
I have two programs that play a role here:
- znsignup.php -> Includes Javascript and PHP + a Form
- zncheckuser.php -> The url the Ajax sends it's request too
I realize that how I have my Javascript, PHP, and some HTML all in one program is not optimal, but this is a very early design. It will be changed eventually.
Here's my code:
znsignup.php
<?php // Page that allows users to join the network
include_once 'znheader.php';// used to include the basic header that is on every page, and to use any functions we may need from znfunctions.php
// Javascript block for Ajax -> Displaying a message if a username is not available
echo <<<_END
<script>
function checkUser(user)
{
if(user.value == '')// if the value property of the username field equals ''....
{
document.getElementById('info').innerHTML = '';// pass '' to the span
return;
}
params = "user=" + user.value;// what we will send to the server
request = new ajaxRequest();// create a new ajaxRequest object
// Ajax call will go to zncheckuser.php which reports whether the username is available
request.open("POST", "zncheckuser.php", true);// use the POST method, with the target url being zncheckuser.php, and request is handled asycnhronously
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");// next 3 lines set up headers to let server know a POST request is coming
request.setRequestHeader("Content-length", params.length);
request.setRequestHeader("Connection", "close");
request.onreadystatechange = function()
{
if(this.readyState == 4)
{
if(this.status == 200)
{
if(this.responseText != null)
{
document.getElementById('info').innerHTML = this.responseText;// the response to the Ajax call is returned to the span
}
else alert("Ajax error: No data received");
}
else alert("Ajax error: " + this.statusText);
}
}
request.send(params);
}
function ajaxRequest()
{
try// Non IE Browser?
{
var request = new XMLHttpRequest();
}
catch(e1)
{
try// IE 6+?
{
request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e2)
{
try//IE 5?
{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e3)// there is no Ajax support
{
request = false;
}
}
}
return request;
}
</script>
<h3>Sign Up Form<h3>
_END;
$error = $user = $pass = "";
if(isset($_SESSION['user'])) destorySession();// if the session variable $_SESSION['user'] has been set, destroy it
if(isset($_POST['user']))// if the form has been submitted $POST['user'] will have a value
{
$user = sanitizeString($_POST['user']);// so if it's been submitted, set $user to the sanitized version of whatever was in the user field
$pass = sanitizeString($_POST['pass']);// if it's been submitted, set $pass to the sanitized version of whatever was in the user field
// username and password validation
if($user == "" || $pass == "")// if either of the fields were left blank..
{
$error = "Not all fields were entered<br /><br />";// set $error to an error message
}
else// if neither of the fields were left blank...
{
$query = "SELECT * FROM znmembers WHERE user='$user'";// a query to find a user with the name that was submitted in the form that wasn't blank
if(mysql_num_rows(queryMysql($query)))// call queryMysql to get the results of the above query. If there aren't zero rows the name has been taken
{
$error = "That username already exists<br /><br />";// set $error to an $error message
}
else// if the username entered wasn't already taken..
{
$query = "INSERT INTO znmembers VALUES('$user', '$pass')";// a query to inset the submitted username and password into the znmembers table
queryMysql($query);// perform the query
die("<h4>Accout created</h4>You may now Log in.");
}
}
}
// create the sign up form
// onblur is called if focus is removed from the field. When submitted $_POST['user'] and $_POST['pass'] will be set and sent to znsignup.php (itself)
// onblur must put the data into $_POST['user'] as well
echo <<<_END
<form method='post' action='znsignup.php'>$error
Username <input type='text' maxlength='16' name='user' value='$user'
onblur='checkUser(this)'/><span id='info'></span><br />
Password <input type='text' maxlength='16' name='pass' value='$pass' /><br />
<input type='submit' value='Signup' />
</form>
_END;
?>
zncheckuser.php
<?php // The Ajax call of znsignup goes here and this looks up if a user is already in the database
include_once 'znfunctions.php';// this isn't a new page so don't need rnheader.php. Just need some functions from znfunctions.php
if(isset($_POST['user']))// if the $_POST variable 'user' has a value...
{
$user = sanitizeString($_POST['user']);// set $user to the sanitized version of this value
$query = "SELECT * FROM znmember WHERE user='$user'";// a query to select the row where user equals the 'user' value from above
if(mysql_num_rows(queryMysql($query)))// call queryMysql to get the results of the above query. If there aren't zero rows the name has been taken
{
echo "<font color=red> ←
Sorry, already taken</font>";// &larr is a left pointing arrow
}
else echo "<font color=reen> ←
Username available</font>";
}
?>
Everything else in the program is working great.
Note:
I added this:
<script>
function checkUser(user)
{
document.write("HEELLLOO!");
.
.
.
For debugging purposes. It makes sense to me that when onblur is called, this document.write should be displayed immediately. That is the case. When I have this line in there it reloads znsignup.php and it is just a while screen that says HEELLLOO!. If I take this line out though, and I move from the username text field, nothing happens. Ajax is not working.
Thanks for the help!
EDIT: From what I can get out of it from spending a lot of time trying to debug, this isn't working:
request = new ajaxRequest();
Why do I think that? Because I added debugging document.write() calls inside ajaxRequest(), and they don't get printed. I did this:
function ajaxRequest()
{
document.write("helllllo!");
try// Non IE Browser?
{
var request = new XMLHttpRequest();
}
catch(e1)
{
try// IE 6+?
{
request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e2)
{
try//IE 5?
{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e3)// there is no Ajax support
{
document.write("none");
request = false;
}
}
}
document.write("success");
return request;
}
At least one of those document.write()'s should print to the screen correct? Well they're not when I move focus from the username box. Why? Well that's for someone to hopefully help me with
This post has been edited by eZACKe: 08 January 2011 - 10:30 AM
MultiQuote
| 