The minimal AJAX script below works in Firefox, but not in IE, Opera, or Chrome. I could use some suggestions or referrals to resources that will help me get the script working in other browsers.
Before there are six characters entered in the CAPTCHA code field, the 'Send' button is supposed to be disabled. When there are at least six characters in the CAPTCHA code field, the script attempts to verify the CAPTCHA w/AJAX. If it verifies, it enables the Send button and sets the background of the CAPTCHA code field light green (symbolic for go). Otherwise, it turns the background of the CAPTCHA code field a sort of pink/red (symbolic for no go). While it's waiting for a server response the background is set to a pastel yellow. At other times, the background of the code field is white. Here's the essence of the script
in the HTML <head>...
function disableSendClearCaptcha( aForm )
{ aForm.submit.disabled = true;
aForm.captcha.value = ""; // clear
setBorderAndBackground( aForm.captcha, '1px solid #ffffff', '#ffffff' ); // white
}
function getNewCaptchaImage()
{ var theForm = document.forms[0];
theForm.image.src='securimage/securimage_show.php?sid=' + Math.random();
disableSendClearCaptcha(theForm);
}in the HTML <body>, a submit form...
<input name="captcha" type="text" size="6" maxlength="6" onkeyup="captchaKeyUp(this.form)" />
<input name="submit" id="submit" type="submit" value="Send" disabled="true"/><br />
<table border="0" ><tr>
<td><img name="image" src="securimage/securimage_show.php" alt="CAPTCHA image" /></td>
<td>
<table>
<tr><td><a href="securimage/securimage_play.php" title="Play audio of the CAPTCHA code">
<img src="securimage/images/audio_icon.gif" border="0" alt="Play Audio" height="21"></a></td></tr>
<tr><td><img title="Get a new CAPTCHA image" onclick="getNewCaptchaImage();"
src="securimage/images/refresh.gif" height="21" border="0" alt="Get new CAPTCHA"></td></tr>
</table>
</td>
</tr></table>
</form>.............. some support code.....
function createRequestObject()
{ var xmlhttp = null;
try
{ if ( window.XMLHttpRequest )
xmlhttp = new XMLHttpRequest(); // Firefox, Chrome, Opera, Safari
else if ( window.ActiveXObject )
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE (or Msxml2.XMLHTTP in IE5, IE6; Microsoft.XMLHTTP in ?)
}
catch(e)
{ alert("Browser doesn't support XMLHttpRequest.");
}
return xmlhttp;
}
//-----------------
function setBorderAndBackground( aField, borderColor, backgroundColor )
{ // green='1px solid #49c24f', red/pink='1px solid #c24949', yellow='1px solid #ffff00', white='1px solid #ffffff'
aField.style.border = borderColor;
// green='#bcffbf', red/pink='#ffbcbc', yellow='#ffffcc'
aField.style.background = backgroundColor;
}
//-----------------
var http = createRequestObject();
var theForm;
//----------------- captcha check
function processCaptchaResponse()
{ var formItem = theForm.captcha; // captcha from global form
if ( http.readyState == 4 )
{ if ( http.status == 200 ) // Complete
{ if ( http.responseText == '1' )
{ setBorderAndBackground( formItem, '1px solid #49c24f', '#bcffbf' ); // green
theForm.submit.disabled = false;
}
else
setBorderAndBackground( formItem, '1px solid #c24949', '#ffbcbc' ); // red/pink
}
else
alert( "AJAX error: " + http.statusText );
}
theForm.submit.value = "Send"; // put the button name back to normal
}
//-----------------
function captchaKeyUp( aForm )
{ aForm.submit.disabled = true;
var formItem = aForm.captcha;
if ( formItem.value.length > 5 )
{ aForm.submit.value = "Wait";
setBorderAndBackground( formItem, '1px solid #ffff00', '#ffffcc' ); // yellow
var url = "securimage/captcheck.php";
http.open('POST', url, true);
http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
theForm = aForm; // make aForm global
http.onreadystatechange = processCaptchaResponse;
http.send("id=1&captcha=" + aForm.captcha.value); // emulate a post
}
else
setBorderAndBackground( formItem, '1px solid #ffffff', '#ffffff' ); // white
Javascript::eventhandler.onKeyUp(); // the normal keyUp behavior
return true; // must be true to get the button state to post back
}
//-----------------You can see it live (in Firefox) by clicking on one of comments/questions/feedback links on pnmx.com/About.php or by opening this URL directly: <http://pnmx.com/SendMessage.php?to=Wm&fr=About>. However you get there (in firefox), enter some CAPTCHA codes and see it work. Any suggestions for how I can make the script work in other browsers would be greatly appreciated...
Thanks, Mike