g-recaptcha-response with AJAX

Question

I've got a contact-form which sends it's information with an ajax-request to an php-script. Now I like to implement google's "i'm not a robot" recaptcha.

The problem is, I don't know how to transport the g-recaptcha-response with ajax. How can I validate it and send the result to send_contactrequest_process.php?

<div class="kontakt-container">
  <form class="kontakt-form" id="kontakt-form" method="post">
    <input type="text" name="firstname" id="contact-form-firstname" placeholder="Vorname (erforderlich)" class="kontakt-form-input" minlength="2" required="required" data-msg="Du musst dieses Feld ausfüllen">
    <input type="text" name="lastname" id="contact-form-lastname" placeholder="Nachname (erforderlich)" class="kontakt-form-input" minlength="2" required="required" data-msg="Du musst dieses Feld ausfüllen">
    <input type="tel" name="telephone" id="contact-form-telephone" placeholder="Telefonnummer" class="kontakt-form-input">
    <input type="email" name="email" id="contact-form-email" placeholder="E-Mail (erforderlich)" class="kontakt-form-input" minlength="10" required="required" data-msg="Diese Email-Adresse ist ungültig">
    <textarea class="kontakt-form-message" id="contact-form-message" required="required" data-msg="Was möchtest du uns mitteilen?"></textarea>
    <div class="g-recaptcha" data-sitekey="MY KEY"></div>
    <div class="kontakt-form-submit" id="kontakt-form-submit">senden</div>
  </form>
  <p class="kontakt-form-success-message">Vielen Dank für Deine Nachricht.</p>
</div>

  if($("#kontakt-form").valid()){

        var firstname = $('#contact-form-firstname').val(); //Validierung der Form-Daten
        var lastname = $('#contact-form-lastname').val();
        var email = $('#contact-form-email').val();
        var telephone = $('#contact-form-telephone').val();
        var message = $('#contact-form-message').val();

        $.ajax({ //AJAX request
            type: "POST",
            url: "../../../include/process/send_contactrequest_process.php",
            data: {firstname: firstname, lastname: lastname, email:email, telephone:telephone, message:message},
            success: function () {
                $('.kontakt-form-success-message').css( "display","inline" );
            },
        });
    }

Answer 1

it is just to call this function grecaptcha.getResponse(); like this :

if($("#kontakt-form").valid()){

    var firstname = $('#contact-form-firstname').val(); //Validierung der Form-Daten
    var lastname = $('#contact-form-lastname').val();
    var email = $('#contact-form-email').val();
    var telephone = $('#contact-form-telephone').val();
    var message = $('#contact-form-message').val();

    $.ajax({ //AJAX request
        type: "POST",
        url: "../../../include/process/send_contactrequest_process.php",
        data: {
          firstname: firstname,
          lastname: lastname,
          email:email,
          telephone:telephone,
          message:message,
          recaptcha:grecaptcha.getResponse()
        },
        success: function () {
            $('.kontakt-form-success-message').css( "display","inline" );
        },
    });
}

Answer 2

ReCaptcha verification is different to the form submitting.

1. See this post on how to embed reCaptcha and verify both a user and a site.

2. After verification is successfiul you might submit form. See this example with an automatic submition. But if you prefer ajax form submition you might nest your submission after siteverify ajax call like this:

   var onReturnCallback = function(response) { 
   var url='proxy.php?url=' + 'https://www.google.com/recaptcha/api/siteverify';
   $.ajax({ 'url' : url,  // site verification ajax request
      dataType: 'json',
      data: { response: response},
      success: function( data  ) {  
           var res = data.success.toString();  
           if (res)
           { 
              var firstname = $('#contact-form-firstname').val(); 
              ....
              $.ajax({ //AJAX request of form submission
                   type: "POST",
                   url: "../include/process/send_contactrequest_process.php",
                   data: {firstname: firstname...},
                   success: function () {
                       $('.kontakt-form-success-message').css( "display","inline" );
                   },
               });
   
            } 
        }  // end success 
     });  // end $.ajax
   
   };  // end onReturnCallback