In this tutorial you will get JavaScript captcha example.
Captcha is used to determine whether or not the user that is filling and submitting a web form is human. While developing web projects we often require to add captcha feature.
So here I have shared the simplest way to create captcha in JavaScript. It will look like as shown in below image.
Note: Don’t use this method in live web projects because this implementation is already readable by attacker and he/she can manipulate it. Everything should be processed on server side. You can just use this captcha generation method in your school or college projects.
JavaScript Captcha Example
The below code generates a 4 digits captcha in JavaScript.
<html>
<head><title>JavaScript Captcha Example</title></head>
<body onload="generateCaptcha()">
<script>
var captcha;
function generateCaptcha() {
var a = Math.floor((Math.random() * 10));
var b = Math.floor((Math.random() * 10));
var c = Math.floor((Math.random() * 10));
var d = Math.floor((Math.random() * 10));
captcha=a.toString()+b.toString()+c.toString()+d.toString();
document.getElementById("captcha").value = captcha;
}
function check(){
var input=document.getElementById("inputText").value;
if(input==captcha){
alert("Equal");
}
else{
alert("Not Equal");
}
}
</script>
<input type="text" id="captcha" disabled/><br/><br/>
<input type="text" id="inputText"/><br/><br/>
<button onclick="generateCaptcha()">Refresh</button>
<button onclick="check()">Submit</button>
</body>
</html>
Explanation
In above script the generateCaptcha() function is used to generate the captcha as the page loads. This is done by the onload attribute in body tag. Inside generateCaptcha() we have used Math.floor((Math.random() * 10)) to generate a random number between 1 (included) and 10 (excluded). In this way we generate four random numbers and then join them to form a string. The toString() method is used to convert number to string. Now we set this string as value of captcha textbox.
When Submit button is clicked the check() function is called that checks whether the entered captcha matches with original captcha or not. If they match, “Equal” alert is displayed otherwise “Not Equal” alert is displayed.
The Refresh button is used to regenerate the captcha.
The above JavaScript captcha code is easy to understand, still if you are facing any problem then comment below.
nice tutorial and explain very simple waiting more tutorial like this
This is not use practically. Because any software can read text by OCR and type.
Yes Permil you are right, this method must not be used in live projects. Everything should be processed on the server, otherwise anyone can get access to code and manipulate it.
hiii after entering wrong captcha i want 2 refresh it plz send me the code for it
Good example, very useful. However I cannot see the point of the refresh button on such a simple mechanism. I only see refresh as useful for distorted character type captchas which can often be impossible to read for many people. It would be good though, to refresh the users input field to blank on error message.
very nice code
Why don’t you simply create a random number between 1000 and 9999 instead of 4 different ones?