How to use captcha before submit the form. in html javascript

Question

<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

You can use simple math capcha or image capcha. which one did you want ? — Ataur Rahman Munna, Jan 11 '17 at 13:11

Ataur Rahman Munna · Accepted Answer · 2017-01-11T13:39:27.480

2

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.

edited Jan 11 '17 at 13:39

answered Jan 11 '17 at 13:31

Ataur Rahman Munna

3,887
1
23
34

@Fif Why we should not store result on the page? If every page refresh it capable to generate new captcha then where is the problem ? Tell me details. – Ataur Rahman Munna Jan 11 '17 at 16:41
Whole point of captcha is to prevent robots from submiting the form. If you provide result of captcha directly on the page, then robot can easily read it and submit it with the rest of the form. – Maciej Kasprzak Jan 12 '17 at 05:42
Read those last line in question.She said, she never used captcha. `please any one have idea than show me, I want to add captcha and than validate it before call ajax. thanks in advance.` Here she wants an idea and simple validation before ajax call. that's why i put the example.Here i said `See the simple example:` not the exact and strict answer. – Ataur Rahman Munna Jan 12 '17 at 05:57
Thanks @Meenapatel – Ataur Rahman Munna Jan 12 '17 at 06:10
You could just store result in JS variable... It would be still simple (or event simplier than setting value inside hidden field and then reading it again). – Maciej Kasprzak Jan 12 '17 at 06:10
how can i make it more secure ?? any idea ? – Meena patel Jan 12 '17 at 06:15
To make it more secure you should store captcha's result only on the server side but it would be much more complex. To make this simple example little bit more secure just don't store result in the hidden field. Instead, store it inside JS variable. – Maciej Kasprzak Jan 12 '17 at 06:20
@Fif http://stackoverflow.com/questions/2613310/ive-heard-global-variables-are-bad-what-alternative-solution-should-i-use/2613647#2613647 – Ataur Rahman Munna Jan 12 '17 at 06:23
I didn't said it has to be global variable. Whole code can be put inside self invoking function. – Maciej Kasprzak Jan 12 '17 at 06:24
To make more secure captcha , you need to check the result stored in server as @Fif said. – Ataur Rahman Munna Jan 12 '17 at 06:25
how!!?? i don't know sir – Meena patel Jan 12 '17 at 06:49

Mohd Aarif · Answer 2 · 2017-10-25T06:05:05.613

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>

How to use captcha before submit the form. in html javascript

2 Answers2