reCAPTCHA issue using JQuery

Question

I'm having a hard time with this reCAPTCHA integration.

Here's my code so far:

HTML

<div class="form_contact">
    <form id="form1" name="form1" method="post" action="#">

    <div>
          <label for="name">Name:</label>
          <input type="text" name="name" id="name" value="" tabindex="1" placeholder="*Required Field" />
    </div>

    <div>
          <label for="name">E-mail address:</label>
          <input type="email" name="email" id="email" value="" tabindex="2" placeholder="*Required Field" />
    </div>

    <div>
          <label for="name">Message Subject:</label>
          <input type="text" name="msgTitle" id="msgTitle" value="" tabindex="3" placeholder="*Required Field" />
    </div>

    <div>
          <label for="textarea">Message:</label>
          <textarea cols="40" rows="8" name="message" id="message" tabindex="4" placeholder="*Required Field"></textarea>
        </div>

    <div>                   
          <label for="textarea">Spam Blocker:</label>

                <div class="captcha">                           
            <?php
                  require_once('recaptchalib.php');
                  $publickey = "**********************************";
                  echo recaptcha_get_html($publickey);
                ?>
        </div>                      

        <a class="myButton" tabindex="5" id="submit" name="submit" href="#">&nbsp;&nbsp;Submit&nbsp;&nbsp;<i class="fa fa-chevron-circle-right fa-2x"></i></
    </form>                 
</div>

JQuery

<script>
    $(function(){
        $('.myButton').click(function() {
            var data= {
             name: $("#name").val(),
             email: $("#email").val(),
             msgTitle: $("#msgTitle").val(),
             message: $("#message").val()
             };


            $.ajax({
             type: "POST",
             url: "mail.php",
             data: data,
             success: function(data){
                    console.log(data);
                 }
            });

            alert('Message Sent!');
            return false;
             });            
    });                 
</script>

MAIL.php

<?php

require_once('recaptchalib.php');
  $privatekey = "*******************";
  $resp = recaptcha_check_answer ($privatekey,
                                $_SERVER["REMOTE_ADDR"],
                                $_POST["recaptcha_challenge_field"],
                                $_POST["recaptcha_response_field"]);

  if (!$resp->is_valid) {
        die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
         "(reCAPTCHA said: " . $resp->error . ")");
  } else {
    $mailto = 'sample@example.com';
    $nameField = $_POST['name'];
    $emailField = $_POST['email'];
    $emailSubject = $_POST['msgTitle'];
    $messageField = $_POST['message'];

    $body = <<<EOD
    <br><hr><br>
    Name: $nameField <br>
    Email: $emailField <br>
    Message: $messageField <br>
    EOD;

    $headers = "From: $emailField\r\n"; // This takes the email and displays it as who this email is from.
    $headers .= "Content-type: text/html\r\n"; // This tells the server to turn the coding into the text.
    $success = mail($mailto, $emailSubject, $body, $headers); // This tells the server what to send.

    echo 'message sent!';

  }
?>

I just want to display the error message below of the <form> if the reCAPTCHA inputs are incorrect.

Thanks in advance.!

Answer 1

Looks like a jQuery question, you can create a placeholder below the form to push in all the errors:

</form>
<div id="errors"></div>

And in your AJAX success call do:

success: function(data){
         //clean it in case of multiple attempts
         $('#errors').html(data);
 }

.html() pastes the data sent from the server.

Answer 2

From the answer above I just wanna add this code if you want to return a callback from your backend

    die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
     "(reCAPTCHA said: " . $resp->error . ")");

then you may want to change die into echo like so:

      echo "The reCAPTCHA wasn't entered correctly. Go back and try it again." .
     "reCAPTCHA said: " . $resp->error . "";

then it should be like:

     $.ajax({
         type: "POST",
         url: "mail.php",
         data: data,
         success: function(data){
                $('#errors').html(data)
             }
        });