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>
-
support code declared in <head> - 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;
-
}
-
//-------------------------------
-
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;
-
}
-
//-------------------------------
-
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
7  4023 
Have you checked the error console?
Firefox has an error console, but the script works there. Are there error consoles for Chrome, IE, and Opera?
Yes, Opera has one as does Chrome (Developer Tools). For IE, errors appear as a warning icon in the status bar and are mostly useless, but you can use one of the add-on toolbars. You can also use Firebug Lite for these browsers.
I removed line 60 ( javascript::eventhandler.onKeyUp(); ) and it works fine in IE, Opera, and Chrome as well as the more forgiving Firefox. Case closed.
Yes, I'm not sure why that line didn't flag up an error in Firefox (unless it's some new syntax) and what the purpose of it was. Anyway, glad to hear that you've got it working.
the onkeyup is a valid event the only issue is when you use it with capitalized letters. i just tested it without caps and it worked.
i did only test in IE but since that was the issue, that is where i tried it.
It sure it when adding event handlers, but the issue here was the line javascript::eventhandler.onKeyUp(); which was syntax I've not seen used before.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: henryrhenryr |
last post by:
I'm trying to log all links clicked. I'm just working this out so there may be some astoundingly bad methods. Please point out!
It all works nicely though if I use mouseover events as the...
|
by: shivendravikramsingh |
last post by:
hi friends, i m using a ajax function for retrieving some values from a database table,and display the values in required field,my prob is that the ajax function i m using is working f9 once,but if...
|
by: wpt394 |
last post by:
I am running a code that works just fine in Firefox, but seems to have trouble in IE. The basic idea is that a travel search process is initiated with one ajax call, and a 2nd ajax call 'updates'...
|
by: vjayis |
last post by:
Hi
i'm having a form which contains 2 list boxes., 1st for category and 2nd for subcategory
the 1st list box contains the category lists., which is displayed from the database.,
and i want...
|
by: burtonfigg |
last post by:
I'm testing an ajax page - this works fine in Firefox:
http://jimpix.co.uk/clients/a/ecards/defaultx.asp
Click on any of the links on the right under the 'occassions' or 'others' headings, in...
|
by: fkhowaja |
last post by:
i want to show the property details and there status (APPROVED, REJECTED, PENDING) the whole result is coming through ajax now i want that if i click on Approved icon or Pending icon or Rejected icon...
|
by: oneadvent |
last post by:
This code works in Chrome and pulls a second drop down, but it will not work in IE6, (I dont have IE7/8 to check right now, but can later) and it works in FF, in IE it doesn't do anything at all.
...
|
by: rbansalit |
last post by:
Hi all
I am making a very simple ajax call. But I am not getting any message from sever.
<html>
<body>
<script type="text/javascript">
function ajaxFunction()
|
by: thatcollegeguy |
last post by:
Below are my 3php and 2js files.
I create a table using ajax/php and then want to change the values in the tables add(+ number for teamid) id's for each specific td in the table. I don't know...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
| | |
