TeleportJobs Captcha Verification using JSON method JavaScript

		beta! (we welcome your feedback)
TeleportJobs home	Webmaster Tools	faq	register	login

JavaScript JSON method of human verification captcha

OK. I have to admit why I am using JSON technology versus AJAX to validate our captcha. I was wrong to try and use AJAX to make a call to our servers because this method violates most browsers default security settings and the browser won't post to a domain other than the domain that the client browser originally called. This is typically called cross-domain violation. The AJAX method can still be used if you set up a proxy server on your domain but it's a lot of work. A simpler method is to use a varied form of JSON to send parameters in the source url for a javascript file.

There are plenty of documents available on the web that explain how JSON technology works so I won't get into the complete details and go straight to how you can verify our captcha using this method.

I left the original page on the AJAX method intact in case anyone wants to try and use this method with a proxy server. Your on your own if you want to try and develop the proxy server.

Implemetation:

Make sure that your web host allows you to have Server Side Includes or SSI. Basically this allows you to save a page as .SHTML vs .HTM or .HTML Also remember to save your page with the .SHTML extension.
Make sure you know YOUR webmaster ID.
Copy the following JavaScript into the <head></head> section of your SHTML page. Preferably right before the closing tag </head> <script language="javascript" type="text/javascript"> function ValidateCaptcha(captcha) { var uid = 'YOUR_WMT_ID' var remoteip = ''; var nocache = Date() var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'http://www.teleportjobs.com/captcha/captcha_verify2.asp?uid=' + uid + '&captcha=' + encodeURIComponent(captcha) + '&rip=' + remoteip + '&nocache=' + nocache document.getElementsByTagName('head')[0].appendChild(script); } function CaptchaTrue() { var mdiv = document.getElementById("CaptchaMessage"); mdiv.innerHTML = "<div style=\"color:green\">You are human!</div>"; document.FORMID.action = "YOUR_SUBMIT_PAGE"; document.FORMID.submit(); } function CaptchaFalse() { var mdiv = document.getElementById("CaptchaMessage"); mdiv.innerHTML = "<div style=\"color:red\">Invalid Text!</div>"; setTimeout("ClearMessage();", 1500); } function ClearMessage() { document.getElementById("CaptchaMessage").innerHTML = "<div></div>"; } </script>
Make sure that you change YOUR_WMT_ID to your actual webmaster ID that was assigned to you when you signed up.
Make sure that the "id" element of your form is set to the same name as "FORMID" above.
"YOUR_SUBMIT_PAGE" above should be the url of the page that you want to submit the form contents to if the captcha text is valid.
Place the captcha image, captcha input box, and div tag directly above the submit button for your form. You can copy and paste the code below directly above the submit button:

<center> <span style="font-family:Tahoma;font-size:8pt;">human verification image</span> <br> <img src="https://www.teleportjobs.com/captcha/captcha_gen.asp?uid=YOUR_WMT_ID" alt="free captcha verification" title="free captcha"> <br> <span style="font-family:Tahoma;font-size:8pt;"> <a href="http://www.teleportjobs.com/captcha/free_captcha.asp">powered by TeleportJobs</a> </span> <br> <input type="text" name="captcha" id="captcha" style="width: 100px"> <br> <div id="CaptchaMessage"></div> </center>

Make sure to replace YOUR_WMT_ID with the 8 character webmaster ID assigned to you when you registered.

action="JavaScript:ValidateCaptcha(document.getElementById('captcha').value);"

Here is an outline of the page format:

<html>
<head>
<script language="javascript" type="text/javascript">PLACE JavaScript CODE HERE</script>
</head>
<body>
<form name="" id="FORMID" method="POST" action="JavaScript:ValidateCaptcha(document.getElementById('captcha').value);">
<img src="URL OF CAPTCHA IMAGE">
<input type="text" name="captcha" id="captcha">
<div id="CaptchaMessage"></div>
<input type="submit" name="Submit1" value="submit">
</form>
</body>
<html>
I think that this is it. Let me know if this works and if you have any questions on how to implement this by contacting me here.