<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="ments" id="ment" required="required" cols="10" rows="10" placeholder="Comments"></textarea>
</div>
<div class="col-md-12">
<input name="ment" 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
<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="ments" id="ment" required="required" cols="10" rows="10" placeholder="Comments"></textarea>
</div>
<div class="col-md-12">
<input name="ment" 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
Share Improve this question edited Jan 11, 2017 at 13:11 jean-max 1,6541 gold badge19 silver badges34 bronze badges asked Jan 11, 2017 at 13:05 Meena patelMeena patel 1491 gold badge4 silver badges16 bronze badges 3- You can use simple math capcha or image capcha. which one did you want ? – Ataur Rahman Munna Commented Jan 11, 2017 at 13:11
- simple math capcha – Meena patel Commented Jan 11, 2017 at 13:12
- Hey, See the example. – Ataur Rahman Munna Commented Jan 11, 2017 at 13:39
2 Answers
Reset to default 3See 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./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="ments" id="ment" 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="ment" 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.
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/TR/html4/loose.dtd">
<html>
<head>
</head>
<script src="https://ajax.googleapis./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>