Trouble integrating reCaptcha into a PHP contact form submitted with AJAX

Question

I recently added AJAX to a working contact form that already had reCaptcha integrated, so the form can be submitted without loading a new page and I am having issues getting the g-recaptcha-response. I left the reCaptcha PHP code the same from when it was working, and I'm not sure what I need to change or add to get it working again.

Form:

  <form name="contact-form" action="mail.php" method="POST">
   <div class="col-6">
     <label for="name">Name*</label>
     <input type="text" name="name" placeholder="Your company.." required>

     <label for="company">Company*</label>
     <input type="text" name="company" placeholder="Your company.." required>

     <label for="phone">Phone</label>
     <input type="text" name="phone" placeholder="Your phone..">

     <label for="email">Email*</label>
     <input type="text" name="email" placeholder="Your email.." required>
   </div>
   <div class="col-6">
     <label for="message">Message*</label>
     <textarea  name="message" placeholder="Write something.." required></textarea>
     <div class="g-recaptcha" data-theme="light" data-sitekey="#"></div>
     <input id="submit" type="button" name="submit" value="SEND">
   </div>
  </form>

JavaScript:

 var submit = document.getElementById('submit');
 var form = document.forms["contact-form"];

 function submitFormAjax() {
   var name = form['name'].value;
   var company = form['company'].value;
   var phone = form['phone'].value;
   var email = form['email'].value;
   var message = form['message'].value;
   var xmlhttp= window.XMLHttpRequest ?
   new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

   xmlhttp.onreadystatechange = function() {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
       alert(xmlhttp.responseText);
     }
   }
   xmlhttp.open("POST","mail.php",true);
   xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   xmlhttp.send("name=" + name + "&company=" + company + "&phone=" + phone + "&email=" + email + "&message=" + message);
  }

 submit.onclick = function(e) {
   if (grecaptcha.getResponse() == ""){
     alert("Please click the reCAPTCHA checkbox!");
     return false;
   } else {
     submitFormAjax();
   }
 }

PHP file:

<?php
  //reCAPTCHA
  $public_key = "#";
  $private_key = "#";
  $url = "https://www.google.com/recaptcha/api/siteverify";

  $response_key = $_POST['g-recaptcha-response'];
  $response = file_get_contents($url.'?secret='.$private_key.'&response='.$response_key.'&remoteip='.$_SERVER['REMOTE_ADDRESS']);
  $response = json_decode($response);

  //For trouble shoooting
  // echo "<pre>";print_r($_POST);echo "</pre>";
  // echo "<pre>";print_r($response);echo "</pre>";

  if($response->success == 1) {
    $name = $_POST['name'];
    $company = $_POST['company'];
    $phone = $_POST['phone'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $formcontent=" From: $name \n Company: $company \n Phone: $phone \n Email: $email \n Message: $message";
    $recipient = "justin.toland@powereng.com, jason.pfaff@powereng.com";
    $subject = "Geovoice.io Inquiry";
    $mailheader = "From: $email \r\n";
    mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
  }     
?>

Currently, after I hit submit button, the first thing the popup alert says is "Undefined index: g-recaptcha-response". I left the reCaptcha keys out for this example.

Answer 1

You are not passing the g-recaptcha-response param in the POST call, so :

xmlhttp.send("name=" + name + "&company=" + company + "&phone=" + phone + "&email=" + email + "&message=" + message);

should be

xmlhttp.send("name=" + name + "&company=" + company + "&phone=" + phone + "&email=" + email + "&message=" + message + "&g-recaptcha-response=" + grecaptcha.getResponse());