By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,688 Members | 1,911 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,688 IT Pros & Developers. It's quick & easy.

minimal AJAX script works in Firefox, but not in IE, Opera, or Chrome

P: 3
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>...

Expand|Select|Wrap|Line Numbers
  1. function disableSendClearCaptcha( aForm )
  2. {  aForm.submit.disabled = true;
  3.    aForm.captcha.value = "";                                                    // clear
  4.    setBorderAndBackground( aForm.captcha, '1px solid #ffffff', '#ffffff' );     // white
  5. }
  6. function getNewCaptchaImage()
  7. {  var theForm = document.forms[0];
  8.    theForm.image.src='securimage/securimage_show.php?sid=' + Math.random();
  9.    disableSendClearCaptcha(theForm);
  10. }
  11.  
in the HTML <body>, a submit form...

Expand|Select|Wrap|Line Numbers
  1. <input name="captcha" type="text" size="6" maxlength="6" onkeyup="captchaKeyUp(this.form)" />
  2. <input name="submit" id="submit" type="submit" value="Send" disabled="true"/><br />
  3. <table border="0" ><tr>
  4.   <td><img name="image" src="securimage/securimage_show.php" alt="CAPTCHA image" /></td>
  5.   <td>
  6.     <table>
  7.       <tr><td><a href="securimage/securimage_play.php" title="Play audio of the CAPTCHA code">
  8.         <img src="securimage/images/audio_icon.gif" border="0" alt="Play Audio" height="21"></a></td></tr>
  9.       <tr><td><img title="Get a new CAPTCHA image" onclick="getNewCaptchaImage();"
  10.       src="securimage/images/refresh.gif" height="21" border="0" alt="Get new CAPTCHA"></td></tr>
  11.   </table>
  12.   </td>
  13.   </tr></table>
  14. </form>
  15.  
support code declared in <head>

Expand|Select|Wrap|Line Numbers
  1. function setBorderAndBackground( aField, borderColor, backgroundColor )
  2. {       // green='1px solid #49c24f', red/pink='1px solid #c24949', yellow='1px solid #ffff00', white='1px solid #ffffff'
  3.     aField.style.border = borderColor;
  4.         // green='#bcffbf', red/pink='#ffbcbc', yellow='#ffffcc'
  5.     aField.style.background = backgroundColor;
  6. }
  7. //-------------------------------
  8. function createRequestObject()
  9. {   var xmlhttp = null;
  10.     try
  11.     {   if ( window.XMLHttpRequest )
  12.             xmlhttp = new XMLHttpRequest();                            // Firefox, Chrome, Opera, Safari
  13.         else if ( window.ActiveXObject )
  14.             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");        // IE (or Msxml2.XMLHTTP in IE5, IE6; Microsoft.XMLHTTP in ?)
  15.     }
  16.     catch(e)
  17.     {   alert("Browser doesn't support XMLHttpRequest.");
  18.     }
  19.     return  xmlhttp;
  20. }
  21. //-------------------------------
  22. var http = createRequestObject();
  23. var theForm;
  24. //-------------------------------
  25. // captcha check
  26. function processCaptchaResponse()
  27. {   var formItem = theForm.captcha;                             // captcha from global form
  28.     if ( http.readyState == 4 )
  29.     {   if ( http.status == 200 )                               // Complete
  30.         {   if ( http.responseText == '1' )
  31.             {   setBorderAndBackground( formItem, '1px solid #49c24f', '#bcffbf' );     // green
  32.                 theForm.submit.disabled = false;
  33.             }
  34.             else
  35.                 setBorderAndBackground( formItem, '1px solid #c24949', '#ffbcbc' );     // red/pink
  36.         }
  37.         else
  38.             alert( "AJAX error: " + http.statusText );
  39.     }
  40.     theForm.submit.value = "Send";                              // put the button name back to normal
  41. }
  42. //-------------------------------
  43. function captchaKeyUp( aForm )
  44. {   aForm.submit.disabled = true;
  45.     var formItem = aForm.captcha;
  46.     if ( formItem.value.length > 5 )
  47.     {   aForm.submit.value = "Wait";
  48.         setBorderAndBackground( formItem, '1px solid #ffff00', '#ffffcc' );             // yellow
  49.  
  50.         var url = "securimage/captcheck.php";
  51.         http.open('POST', url, true);
  52.         http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  53.         theForm = aForm;                                        // make aForm global
  54.         http.onreadystatechange = processCaptchaResponse;
  55.         http.send("id=1&captcha=" + aForm.captcha.value);       // emulate a post
  56.     }
  57.     else
  58.         setBorderAndBackground( formItem, '1px solid #ffffff', '#ffffff' );             // white
  59.  
  60.     javascript::eventhandler.onKeyUp();                         // the normal keyUp behavior
  61.     return  true;                                               // must be true to get the button state to post back
  62. }
  63. //-------------------------------
  64.  
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
Aug 10 '09 #1
Share this Question
Share on Google+
7 Replies


acoder
Expert Mod 15k+
P: 16,027
Have you checked the error console?
Sep 5 '09 #2

P: 3
Firefox has an error console, but the script works there. Are there error consoles for Chrome, IE, and Opera?
Sep 5 '09 #3

acoder
Expert Mod 15k+
P: 16,027
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.
Sep 5 '09 #4

P: 3
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.
Sep 8 '09 #5

acoder
Expert Mod 15k+
P: 16,027
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.
Sep 8 '09 #6

P: 7
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.
Sep 11 '09 #7

acoder
Expert Mod 15k+
P: 16,027
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.
Sep 12 '09 #8

Post your reply

Sign in to post your reply or Sign up for a free account.