Replace Captcha by Simple Number Calculation Using Jquery

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<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>
Jquery Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<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>

 

FullCode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<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>

 

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

About prasad k

Prasad Kuppusamy has written 81 post in this blog.

i m php developer, web designer.

3 Responses to Replace Captcha by Simple Number Calculation Using Jquery

  1. codesnippet says:

    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

  2. SudhirR says:

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

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

unrumpled-archiepiscopacy