Sorry it took a while JZ, but I'm back and I have some code for you! It's divided into three parts - the page the user looks at (index.php), the javascript (ajax.js) and the backend script (backend.php).
Code:
index.php
<html>
<head>
<title>Database Emailer</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body onLoad="backCompat();">
<form id="emailsignup" method="GET" action="backend.php">
<input id="nojs" type="hidden" value="true" />
<input id="email" type="text" />
<span id="submitspan"><input id="submit" type="submit" /></span>
</form>
<div id="return">
</div>
</body>
</html>
Code:
backend.php
<?php
$nojs=$_GET['nojs'];
$email=$_GET['email'];
IF ($nojs=="true") {
// process email in non ajax way, redirect to confirmation page etc etc - this is for users who dont have JS enabled
} ELSE {
// process ajax style
// do database work and return one of 3 values depending on outcome
IF ( valid email address ) {
IF (not already in database) {
IF (added to DB OK) {
$return="1";
} ELSE {
$return="3";
}
ELSE {
$return="2";
}
} ELSE {
$return="4";
}
echo $return;
}
Code:
ajax.js
function ajaxSubscribe()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
// end of standard code
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4) // readystate 4 means finished, others mean other things, but not finished is all that matters!
{
//request done
if(xmlHttp.responseText==1)
{
// everything OK, so return that message to 'return' div
document.getElementById('return').innerHTML="Email Subscribed";
}
else if (xmlHttp.responseText==2)
{
// email already in DB, so tell user this
} // more else ifs here for the other options - you get the picture!
}
else
{
// request still pending, i.e. backend.php is being parsed
document.getElementById('return').innerHTML='Working'
}
}
// this is how we call the backend.php - inserting GET variables here.
xmlHttp.open("GET","backend.php?nojs=" + document.getElementById('nojs').value + "&email=" + document.getElementById('email').value,true);
xmlHttp.send(null);
}
function backCompat() {
document.getElementById('nojs').value="false";
document.getElementById('submitspan').innerHTML='<a href="#" onClick="ajaxSubscribe();">Subscribe</a>';
}
OK I think most of the first two pages is self explanatory. In the ajax.js file, the bits between the
bold italicised code is standard - as usual IE is awkward and uses different code, so we just have to work out what the browser is and use the appropriate code. Don't worry about how it works, just know it needs to go at the beginning of any Ajax function.
Hopefully the comments explain the rest of it, but let me just explain the backCompat function:
If we just made the form ajaxified, i.e. reliant on JS, we create accesibility issues for people with JS turned off - not good. So what we do is create a normal form, which can be submitted without JS, and processed like any other form. However, for people with JS on, a function runs on page load which removes the normal submit button, and replaces it with the link to our Ajax function. It also changes the "nojs" hidden field from true to false. This is in place so that we can let our PHP script know whether it's being called by an Ajax function, or if it's being used by a normal user.
It all seems a bit complex, but if you have any questions, don't hesitate to ask.