Menu
<form action="#" method="post" id="contactMsg">
<div class="row">
<div class="col-md-4">
<input name="name" id="name" required="required" type="text" placeholder="Name">
</div>
<div class="col-md-4">
<input name="email" id="email" required="required" type="text" placeholder="Email">
</div>
<div class="col-md-4">
<input name="subject" id="subject" required="required" type="text" placeholder="Subject">
</div>
<div class="col-md-12">
<textarea name="comments" id="comment" required="required" cols="10" rows="10" placeholder="Comments"></textarea>
</div>
<div class="col-md-12">
<input name="comment" id="ContactNow" type="submit" value="Submit">
</div>
</div>
</form>
// Here Ajax code
var formData = new FormData($("#contactMsg")[0]);
$.ajax({
url: 'contactMsg.php',
data:formData,
cache: false,
contentType:false,
processData:false,
type: 'post',
success: function(response) {
$("#contactMsg")[0].reset();
$("#SucessMsg").fadeIn('slow').delay(3000).fadeOut('slow');
}
});
I never use captcha. I really don't know about this. please any one have idea than show me, I want to add captcha and than validate it before call ajax. thanks in advance
455
asked Mar 13 '26 14:03
See the simple example:
$(document).ready(function(){
var a = (Math.ceil(Math.random()*9))+1;
var b = (Math.ceil(Math.random()*9))+1;
var queryText = a+" + "+b+"=";
document.getElementById('queryString').innerHTML=queryText;
var result = parseInt(a)+parseInt(b);
document.getElementById('actualResult').value=result;
});
function _validate(){
if(document.getElementById('actualResult').value == document.getElementById('result').value){
alert("matched");
}else{
alert("not matched");
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<form action="#" method="post" id="contactMsg">
<div class="row">
<div class="col-md-4">
<input name="name" id="name" required="required" type="text" placeholder="Name">
</div>
<div class="col-md-4">
<input name="email" id="email" required="required" type="text" placeholder="Email">
</div>
<div class="col-md-4">
<input name="subject" id="subject" required="required" type="text" placeholder="Subject">
</div>
<div class="col-md-12">
<textarea name="comments" id="comment" required="required" cols="10" rows="10" placeholder="Comments"></textarea>
</div>
<div class="col-md-12">
<label id="queryString"></label>
<input type="text" value="" id="result"/>
</div>
<input type="hidden" id="actualResult"/>
<div class="col-md-12">
<input name="comment" id="ContactNow" type="button" value="Submit" onclick="_validate();">
</div>
</div>
</form>
</body>Explanation: When page loading then we generate random number and make a query string and make actual result in a hidden field. when user submit then we checked user input with that hidden field input.if match then we passed and if not we blocked.
197
You may use this code, its working fine you may download captcha images from given link
var val=[];
val.push("VQ7W3"); /** push value in this array */
val.push("A1234"); /** To maintain image order here */
val.push("A32BD"); /** if first image 0_capt.jpeg contains value VQ7W3 so push this value into zero(0) index of array */
val.push("LD673");
val.push("PQ78V");
val.push("MX81W");
var x;
/**This below method generate random number from 0-5
* name of image starts with that number will set on
* captcha location
*/
function myFunction() {
x = Math.floor(Math.random() * 6); // here 6 stand for how many images you are using return 0-6 number.
$("#imgCaptchaPlace").html("<img id='abc' src='captcha_images/"+x+"_cpt'/><br>"+val[x]) ;
}
myFunction();
/**
* This below method will call on change of input fields where user enter
* captcha code value
*/
function chaeckCpatch(id)
{
if($("#"+id).val()==val[x])
{
alert("match");
}
else
{
alert("No match");
}
}<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
<!-- below div use to display captcha image -->
<div id="imgCaptchaPlace"></div>
<!-- below textfield where user enter captcha value -->
<input type="text" id="captchaText" onchange="chaeckCpatch(this.id);"/>
<!-- include this JS file -->
<script src="captchByAarif.js" type="text/javascript"></script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With