Replace Captcha by Simple Number Calculation Using Jquery

By | July 23, 2013

Captcha is the best way to ensure security of an input form in webpage. Instead of using captcha plugin, we can use jQuery to create numbered Calculation. Here is the tutorial to create numbered captcha using jquery.

General concept behind this Calculation is two number will be shown, we have to add and type the sum in textbox.

  • For every page refresh two numbers will change
  • Refresh Calculation -> to change numbers
  • When we enter wrong total, an alert message will be displayed and two numbers will changed.
Replace Captcha by Simple Number Calculation Using Jquery

Replace Captcha by Simple Number Calculation Using Jquery

 

Jquery to perform this process is given below.

  1.  function randomnum() is the function to change two numbers, that two numbers are auto generated numbers using function Math.random()
  2. $(“.re”).click(function() will be called when we want to change the two numbers by call this function randomnum().
  3. $(“#submit”).click(function() will be called when we submit the form. It will check whether the sum of two number is equal to total number, if it is equal form will be proceeded else alert nessage will be displayed and two numbers will be changed.
Jquery Code

[code type=html]
<script type=”text/javascript”>

function randomnum()
{
var number1 = 5;
var number2 = 50;
var randomnum = (parseInt(number2) – parseInt(number1)) + 1;
var rand1 = Math.floor(Math.random()*randomnum)+parseInt(number1);
var rand2 = Math.floor(Math.random()*randomnum)+parseInt(number1);
$(“.rand1”).html(rand1);
$(“.rand2”).html(rand2);
}

$(document).ready(function(){
$(“.re”).click(function(){
randomnum();
});

$(“#submit”).click(function(){
var total=parseInt($(‘.rand1’).html())+parseInt($(‘.rand2’).html());
var total1=$(‘#total’).val();
if(total!=total1)
{
alert(“Wrong sum Entered”);
randomnum();
return false;
}
else
{
alert(“sum Entered Correctly”);
}

});
randomnum();
});
</script>

[/code]

Jquery Code

[code type=css]
<style type=”text/css”>
.rand1, .rand2
{
padding: 16px;
background-color: #ADDB4B;
margin: 25px 0;
float: left;
border-radius: 49px;
}
.plus
{
padding: 16px 0;
margin: 25px 7px;
float: left;
}
.re
{
padding:8px;
background-color:#D8A217;
margin:35px;
float:left; cursor:pointer;
box-shadow: 2px 2px 2px 1px #818181;
-moz-box-shadow: 2px 2px 2px 1px #818181;
-webkit-box-shadow: 2px 2px 2px 1px #818181;
-ms-box-shadow: 2px 2px 2px 1px #818181;
-o-box-shadow: 2px 2px 2px 1px #818181;
}input[type=text]
{
margin:35px;
height:30px;
width:50px;
}
input[type=submit]
{
border: 1px solid #ccc;
background-color: #9BC925;
padding: 5px 25px;
margin: 35px 11px;
height: 30px;
}
</style>
[/code]

 

FullCode

[code type=html]

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Replace Captcha by Simple Number Calculation Using Jquery Code</title>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js”>
</script>

<script type=”text/javascript”>

function randomnum()
{
var number1 = 5;
var number2 = 50;
var randomnum = (parseInt(number2) – parseInt(number1)) + 1;
var rand1 = Math.floor(Math.random()*randomnum)+parseInt(number1);
var rand2 = Math.floor(Math.random()*randomnum)+parseInt(number1);
$(“.rand1”).html(rand1);
$(“.rand2”).html(rand2);
}

$(document).ready(function(){
$(“.re”).click(function(){
randomnum();
});

$(“#submit”).click(function(){

var total=parseInt($(‘.rand1’).html())+parseInt($(‘.rand2’).html());
var total1=$(‘#total’).val();
if(total!=total1)
{
alert(“Wrong Calculation Entered”);
randomnum();
return false;
}
else
{
alert(“Calculation Entered Correctly”);
}

});
randomnum();
});
</script>
<style type=”text/css”>
.rand1, .rand2
{
padding: 16px;
background-color: #ADDB4B;
margin: 25px 0;
float: left;
border-radius: 49px;
}
.plus
{
padding: 16px 0;
margin: 25px 7px;
float: left;
}
.re
{
padding:8px;
background-color:#D8A217;
margin:35px;
float:left; cursor:pointer;
box-shadow: 2px 2px 2px 1px #818181;
-moz-box-shadow: 2px 2px 2px 1px #818181;
-webkit-box-shadow: 2px 2px 2px 1px #818181;
-ms-box-shadow: 2px 2px 2px 1px #818181;
-o-box-shadow: 2px 2px 2px 1px #818181;
}

input[type=text]
{
margin:35px;
height:30px;
width:50px;
}
input[type=submit]
{
border: 1px solid #ccc;
background-color: #9BC925;
padding: 5px 25px;
margin: 35px 11px;
height: 30px;
}
</style>
</head>

<body>
<div>Ree</div>
<div></div>
<div>+</div>
<div></div>

<form method=”post” action=””>
<input type=”text” id=”total” autocomplete=”off” />
<input type=”submit” id=”submit” value=”Submit” />
</form>
</body>
</html>

[/code]

 

Note:  This is a client side simple calculation, bot can break this code. Its just a quick solution

3 thoughts on “Replace Captcha by Simple Number Calculation Using Jquery

  1. codesnippet

    Nice design…. but is very easy to hack this kind of captcha… i can made easily a bot that can give the inner text in rand1 e rand2 object and autopost something everywhere this kind of captcha is use.

    The first step of a good captcha is not allow at bots to give the result in html code…

    this is a bad solution with a nice design

    Reply
  2. SudhirR

    Agreed. The server should decide human/bot. Any client side solution is easy to circumvent. Anyways a quick and easy solution.

    Reply

Leave a Reply to codesnippet Cancel reply

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

coemption-expediency