Simple Javascript Captcha You Can Add to Any Form

Here is a simple yet effective way to add a Javascript captcha to your new or existing form.

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>


Comments

August 28, 2014 at 1:42 pm, Erin Blackwell said:

This looks good, but unfortunately it never gives the actual Captcha code for the user to enter.

Reply

September 03, 2014 at 6:00 am, tara said:

It is working so fine.

Reply

September 30, 2014 at 1:31 pm, Ian said:

FYI, the captcha code is in white, so if you have a white background, just search for #fff and replace it withh #000 and you will see the code. The only thing I see wrong with the code is that you have to replace all the single and double quotes because your blog uses fancy quotes and there is an tag with no opening tag which can be simply deleted. I am going to post my changes as part of an article I’m writing on my blog at http://jafty.com/blog/best-captcha-scripts/ if you are interested. Thanks for the start.

Reply

September 30, 2014 at 2:14 pm, Ian said:

BTW, I did give you credit for the original code you provided here on my blog and also linked back to this page since I left a link to my blog http://jafty.com/blog in the previous comment. Let me know if you have any issues with this and I will mend accordingly. Thanks – Ian

Reply

May 11, 2015 at 2:38 am, sunilpatro said:

ok so fine

Reply

November 28, 2015 at 12:58 am, Mansour said:

Hello,

Thank you for this great script, I have only one question. I have created 3 forms in one page and repeat the code

[code]

Enter This Code:

[/code]

But it is not working. Could you please advice.

Thanks in advance!

Reply

June 18, 2016 at 4:49 am, rajendra said:

It ‘s Working fine , it’s too easy to plug in any code

Reply

December 04, 2016 at 10:27 pm, Mahtab said:

its not work can You send it full code on my email

Reply

October 29, 2017 at 12:48 pm, captcha breaker said:

Hi tһere, аfter reading this amazing paragraph i am also glad to share
my experience һere witһ colleagues.

Reply

October 30, 2017 at 1:42 am, Captcha recognition Service said:

Ꮋeⅼⅼο, i think that i saᴡ you visited
my blog sο i came to “return tһe favor”.І’m attempting
to find tһings tо improve my website!Ӏ suppose itѕ ok to use a few оf уour ideas!!

Reply

Leave a Reply

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

image_description