0

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

1
Contributor
1
Reply
3
Views
8 Years
Discussion Span
Last Post by mike89
0

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

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.