title: ReCAPTCHA not working when using AJAX
body: <p>I was getting spam emails from my contact form so I added googles ReCAPTCHA to my contact form. After lots of tries and fails, I am at a point of asking for help. </p>
  
  <p>First, my HTML is in a reveal and calls the ajaxsubmit.php</p>
  
  <pre><code>            &lt;div class="reveal" id="contactModal" data-reveal&gt;
            &lt;h1&gt;Contact Us&lt;/h1&gt;
            &lt;div class="grid-x grid-margin-x"&gt;
              &lt;form id="ajax-contact" method="post" action="/assets/js/ajaxsubmit.php" class="large-12 cell"&gt;
                &lt;div class="grid-x grid-margin-x"&gt;
                  &lt;div class="large-6 cell"&gt;
                    &lt;label&gt;Name*&lt;/label&gt;
                    &lt;input id="name" name="name" required type="text" placeholder="Name..." /&gt; &lt;/div&gt;
                  &lt;div class="large-6 cell"&gt;
                    &lt;label&gt;Company*&lt;/label&gt;
                    &lt;input id="company" type="text" placeholder="Company..." name="company" required/&gt; &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="grid-x grid-margin-x"&gt;
                  &lt;div class="large-6 cell"&gt;
                    &lt;label&gt;Email*&lt;/label&gt;
                    &lt;input id="email" type="email" placeholder="Email..." name="email" required /&gt; &lt;/div&gt;
                  &lt;div class="large-6 cell"&gt;
                    &lt;label&gt;Phone*&lt;/label&gt;
                    &lt;input id="phone" type="tel" placeholder="Phone..." name="phone" required/&gt; &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="grid-x grid-margin-x"&gt;
                  &lt;div class="large-12 cell"&gt;
                    &lt;label&gt;Message*&lt;/label&gt;
                    &lt;textarea id="message" placeholder="Message..." name="message" required&gt;&lt;/textarea&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="grid-x grid-margin-x"&gt;
                    &lt;div class="large-6 cell"&gt;
                    &lt;div class="g-recaptcha" data-sitekey="MYSITEKEY"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                  &lt;div class="large-6 clear-fix"&gt;
                    &lt;button class="button float-right" type="submit"&gt;Submit&lt;/button&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/form&gt;
              &lt;div id="form-messages"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;button class="close-button" data-close aria-label="Close reveal" type="button"&gt; &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt; &lt;/button&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>After the user completes the form and the recaptcha my ajax.js file grabs it when they click submit and prevents default action.</p>
  
  <pre><code>$(function() {
  var form = $("#ajax-contact");
  var formMessages = $("#form-messages");
  //We set our own custom submit function
  $(form).submit(function(event) {
  //Prevent the default behavior of a form
  event.preventDefault();
  //Get the values from the form
  var name = $("#name").val();
  var company = $("#company").val();
  var phone = $("#phone").val();
  var email = $("#email").val();
  var message = $("#message").val();
  //AJAX POST
  $.ajax({
  type: "POST",
  url: "/assets/js/ajaxsubmit.php",
  data: {
  name: name,
  company: company,
  email: email,
  phone: phone,
  message: message,
  captcha: grecaptcha.getResponse()}
  }).done(function(response) {
  $(formMessages).removeClass("error");
  $(formMessages).addClass("success");
  // Set the message text.
  $(formMessages).text(response);
  // Clear the form.
  $("#name").val("");
  $("#company").val("");
  $("#phone").val("");
  $("#email").val("");
  $("#message").val("");
  }).fail(function(data) {
  // Make sure that the formMessages div has the "error" class.
  $(formMessages).removeClass("success");
  $(formMessages).addClass("error");
  // Set the message text.
  if (data.responseText !== "") {
      $(formMessages).text(data.responseText);
  } else {
      $(formMessages).text("Oops! An error occured and your message could not be sent.");
  }
  });
  });
  });
  </code></pre>
  
  <p>After the Ajax.js it gets posted VIA the Ajax jquery function $.ajax to my ajaxsubmit.php file.</p>
  
  <pre><code> &lt;?php
  // If the form was submitted
  if ($_SERVER["REQUEST_METHOD"] == "POST") {
  
  // If the Google Recaptcha box was clicked
  if(isset($_POST[‘captcha’]) &amp;&amp; !empty($_POST[‘captcha’])){    
  $captcha=$_POST[‘captcha’];
  $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=MYSECRET&amp;response=".$captcha."&amp;remoteip=".$_SERVER[‘REMOTE_ADDR’]);
  $obj = json_decode($response);
  
  // If the Google Recaptcha check was successful
  if($obj-&gt;success == true) {
  $name = strip_tags(trim($_POST["name"]));
  $name = str_replace(array("\r","\n"),array(" "," "),$name);
  $company = strip_tags(trim($_POST["company"]));
  $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
  $phone = strip_tags(trim($_POST["phone"]));
  $message = trim($_POST["message"]);
  // Check that data was sent to the mailer.
          if ( empty($name) OR empty($company) OR empty($phone) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
  http_response_code(400);
  echo "Oops! There was a problem with your submission. Please complete the form and try again.";
  exit;
  }
          // Set the recipient email address.
          $recipient = "EMAIL";
  
          // Set the email subject.
          $subject = "New contact from $name";
  
          // Build the email content.
          $email_content = "Name: $name\n";
          $email_content .= "Email: $email\n\n";
          $email_content .= "Company: $company\n\n";
          $email_content .= "Phone: $phone\n\n";
          $email_content .= "Message:\n$message\n";
  
          // Build the email headers.
          $email_headers = "From: $name &lt;$email&gt;";
  if (mail($recipient, $subject, $email_content, $email_headers)) {
  http_response_code(200);
  echo "Thank You! Your message has been sent.";
  }
  
  else {
  http_response_code(500);
  echo "Oops! Something went wrong, and we couldn’t send your message.";
  }
  
  }
  
  // If the Google Recaptcha check was not successful
  else {
  echo "Robot verification failed. Please try again.";
  }
  
  }
  
  // If the Google Recaptcha box was not clicked
  else {
  echo "Please click the reCAPTCHA box.";
  }
  
  }
  
  // If the form was not submitted
  // Not a POST request, set a 403 (forbidden) response code.
  else {
  http_response_code(403);
  echo "There was a problem with your submission, please try again.";
  }
  ?&gt;
  </code></pre>
  
  <p>Now this is where my issue lies it never gets past the very first if statement <code>if(isset($_POST[‘captcha’]) &amp;&amp; !empty($_POST[‘captcha’]))</code> and goes straight to Please click the ReCAPTCHA box.   If I Echo the captcha var it has data in it. So I don't understand why it won't continue into the first if statement any help is greatly appreciated. Thank you!!!</p>