"Not a robot" recaptcha without a <form> but AJAX instead

I just implemented it without using any form and submit mechanism, respectively. Thus, a pure AJAX solution.

HTML code:

<div id="recaptcha-service" class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey=""></div><script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=en"></script>

JavaScript code:

window.recaptchaCallback = undefined;jQuery(document).ready(function($) {  window.recaptchaCallback = function recaptchaCallback(response) {    $.ajax({      method: "POST",      url: "http://example.com/service.ajax.php",      data: { 'g-recaptcha-response': response },    })      .done(function(msg) {        console.log(msg);      })      .fail(function(jqXHR, textStatus) {        console.log(textStatus);      });  }});

The point is using a callback (recaptchaCallback in this case).

You can find a more complete example at https://gist.github.com/martinburger/f9f37770c655c25d5f7b179278815084. That example uses Google's PHP implementation on the server side (https://github.com/google/recaptcha).

You use a form, interrupt the submissions of the form. Set up a form as per normal:

<form action="post.php" method="POST" id="my-form">    <div class="g-recaptcha" data-sitekey="6Lc_0f4SAAAAAF9ZA_d7Dxi9qRbPMMNW-tLSvhe6"></div>    <input type="text" id="text">    <button type="submit">Sign in</button></form><script src='https://www.google.com/recaptcha/api.js'></script>

And then you use jQuery to interrupt the submission of the form and serialize it, allowing you to pass the data through Ajax:

$('#my-form').submit(function(e) {    e.preventDefault();    $this = $(this);    $.ajax({        type: "POST",        url: "post.php",        data: $this.serialize()    }).done(function(data) {    }).fail(function( jqXHR, textStatus ) {        alert( "Request failed: " + textStatus );    });});

As you will have noticed I've used .done and .fail instead of success and error, this is the preferred way of handling the response.

For answer completeness, say you wanted to just use a link you could...

<form id="g-recap">  <div class="g-recaptcha" data-sitekey="{{ gcaptcha key }}" ></div></form><a href="/recaptchaured/path">Verify</a>$('a').on('click',function(e) {   e.preventDefault();   document.location =  $(this).attr('href') + '?' + $('#g-recap').serialize()});