title: ReCaptcha 2.0 With AJAX
body: <p>I have managed to get ReCaptcha 2.0 working in my website. However, it's only working when I don't use AJAX and I let the form submit "naturally".  </p>
  
  <p>I want to submit the form with the captcha and alert the user with a success note <strong>without refreshing the page</strong>. </p>
  
  <p>I tried the following code, but it seems like the server doesn't get the user response:  </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;form class="form" action="javascript:void(0)" novalidate&gt;
      &lt;!-- all the inputs... --&gt;
  
      &lt;!-- captcha --&gt;
      &lt;div class="input-group"&gt;
          &lt;div class="g-recaptcha" data-sitekey="6LdOPgYTAAAAAE3ltWQGar80KUavaR-JblgPZjDI"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="errors" id="errors" style="display: none"&gt;&lt;/div&gt;
  
      &lt;div class="input-group"&gt;
          &lt;input type="button" value="Send" class="btn-default right" id="submit"&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$('#submit').click(function(e) {
      console.log('clicked submit'); // --&gt; works
  
      var $errors = $('#errors'),
          $status = $('#status'),
  
          name = $('#name').val().replace(/&lt;|&gt;/g, ""), // prevent xss
          email = $('#email').val().replace(/&lt;|&gt;/g, ""),
          msg = $('#message').val().replace(/&lt;|&gt;/g, "");
  
      if (name == '' || email == '' || msg == '') {
          valid = false;
          errors = "All fields are required.";
      }
  
      // pretty sure the problem is here
      console.log('captcha response: ' + grecaptcha.getResponse()); // --&gt; captcha response: 
  
      if (!errors) {
          // hide the errors
          $errors.slideUp();
          // ajax to the php file to send the mail
          $.ajax({
              type: "POST",
              url: "http://orenurbach.com/assets/sendmail.php",
              data: "email=" + email + "&amp;name=" + name + "&amp;msg=" + msg + "&amp;g-recaptcha-response=" + grecaptcha.getResponse()
          }).done(function(status) {
              if (status == "ok") {
                  // slide down the "ok" message to the user
                  $status.text('Thanks! Your message has been sent, and I will contact you soon.');
                  $status.slideDown();
                  // clear the form fields
                  $('#name').val('');
                  $('#email').val('');
                  $('#message').val('');
              }
          });
      } else {
          $errors.text(errors);
          $errors.slideDown();
      }
  });
  </code></pre>
  
  <p><strong>PHP:</strong></p>
  
  <pre><code>&lt;?php
      // assemble the message from the POST fields
  
      // getting the captcha
      $captcha = '';
      if (isset($_POST['g-recaptcha-response']))
          $captcha = $_POST['g-recaptcha-response'];
      echo 'captcha: '.$captcha;
  
      if (!$captcha)
          echo 'The captcha has not been checked.';
      // handling the captcha and checking if it's ok
      $secret = 'MY_SECRET';
      $response = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&amp;response=".$captcha."&amp;remoteip=".$_SERVER['REMOTE_ADDR']), true);
  
      var_dump($response);
  
      // if the captcha is cleared with google, send the mail and echo ok.
      if ($response['success'] != false) {
          // send the actual mail
          @mail($email_to, $subject, $finalMsg);
  
          // the echo goes back to the ajax, so the user can know if everything is ok
          echo 'ok';
      } else {
          echo 'not ok';
      }
  ?&gt;
  </code></pre>
  
  <p><strong>The result</strong> in the PHP page:</p>
  
  <pre><code>captcha: The captcha has not been checked.array(2) { ["success"]=&gt; bool(false) ["error-codes"]=&gt; array(1) { [0]=&gt; string(22) "missing-input-response" } } not ok
  </code></pre>
  
  <p><strong>Bottom line</strong> is, how can I get the input response manually without it automatically going with the rest of the POST data?</p>