Member Avatar for mike89

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 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

  • 1 Contributor
  • 1 Reply
  • 206 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by mike89

Dani AI

Generated

Short summary: the cross‑browser failure was caused by a non‑standard, problematic call in the keyup handler that later removed — doing so fixed the issue in Firefox, Chrome, IE and Opera. A runtime/syntax error inside an event handler will stop the rest of that handler from running, which in this case prevented the normal enable/disable and return behavior.

What to take away and why it happens:

  • Any nonstandard or invalid JavaScript in an event handler can throw in some engines and abort the handler. Different engines surface the failure differently, so a line that "seems to work" in one browser can break others.
  • Console output (Developer Tools) is the fastest way to spot the offending error; look for exceptions or syntax errors when reproducing the problem.

Practical hardening steps (applies generally, not just to this thread):

  • Avoid calling unknown globals directly. Guard calls with checks or a try/catch so a missing object or function does not break the rest of the handler.
  • Create a fresh XMLHttpRequest/XHR for each request rather than reusing one shared global XHR object; that avoids concurrency/race problems across browsers.
  • Always encode form values with encodeURIComponent and trim server responses before exact comparisons.
  • Avoid naming form controls that shadow native properties (for example a control named "submit" can shadow form.submit in some contexts).

Minimal safe patterns (illustrative):

// guard a third‑party callback
if (window.eventhandler && typeof window.eventhandler.onKeyUp === 'function') {
  try { window.eventhandler.onKeyUp(); } catch (e) { /* ignore or log */ }
}

// create a local XHR for each check
function postCaptcha(form) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/securimage/captcheck.php', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      var resp = (xhr.responseText || '').replace(/^\s+|\s+$/g, '');
      // handle response...
    }
  };
  xhr.send('id=1&captcha=' + encodeURIComponent(form.captcha.value));
}

Acknowledgement: the simple removal reported by was the right practical fix; the checklist above helps prevent similar cross‑browser surprises in the future.

Member Avatar for mike89

I deleted line 59 below: Javascript::eventhandler.onKeyUp();

and everything works fine in Firefox, Chrome, IE, Opera. Case closed

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.