Add this Math Captcha to Any Form Easily

Need a simple Match Captcha system for your existing form? Well, here is a simple yet effective way to add a Match Captcha to any form easily. Give it a shot.

1.   Add this to your Post action line: onsubmit=”return checkform(this);”

EXAMPLE: <form name=”review” ACTION=”#” METHOD=”POST” onsubmit=”return checkform(this);”>

2.   Add this field code info to your form:

<font color=”#DD0000″>Enter This Code >></font> <span id=”txtCaptchaDiv” style=”color:#fff”></span><!– this is where the script will place the generated code –>
<input type=”hidden” id=”txtCaptcha” /></label><!– this is where the script will place a copy of the code for validation: this is a hidden field –>
<input type=”text” name=”txtInput” id=”txtInput” size=”15″ />

3.   Add this javascript code right below your </form> end tag:

<script type=”text/javascript”>
function checkform(theform){
var why = “”;

if(theform.txtInput.value == “”){
why += “- Security code should not be empty.n”;
}
if(theform.txtInput.value != “”){
if(ValidCaptcha(theform.txtInput.value) == false){
why += “- Security code did not match.n”;
}
}
if(why != “”){
alert(why);
return false;
}
}

//Generates the captcha function
var a = Math.ceil(Math.random() * 9)+ ”;
var b = Math.ceil(Math.random() * 9)+ ”;
var c = Math.ceil(Math.random() * 9)+ ”;
var d = Math.ceil(Math.random() * 9)+ ”;
var e = Math.ceil(Math.random() * 9)+ ”;

var code = a + b + c + d + e;
document.getElementById(“txtCaptcha”).value = code;
document.getElementById(“txtCaptchaDiv”).innerHTML = code;

// Validate the Entered input aganist the generated security code function
function ValidCaptcha(){
var str1 = removeSpaces(document.getElementById(‘txtCaptcha’).value);
var str2 = removeSpaces(document.getElementById(‘txtInput’).value);
if (str1 == str2){
return true;
}else{
return false;
}
}

// Remove the spaces from the entered and generated code
function removeSpaces(string){
return string.split(‘ ‘).join(”);
}
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *

image_description