title: How to use Google Recaptcha before doing an AJAX Post
body: <p>I have a form which submits data to a Kulahub API, using AJAX, but I need to verify first that the user filling in the form is genuine, then upon getting the OK from Google, do the AJAX post, however, I can't find a simple solution.</p>
  
  <p>The Post works fine, and submits the data to the API.</p>
  
  <p>Its the recaptcha, i have tried the following threads solutions; <a href="https://stackoverflow.com/questions/43837623/invisible-recaptcha-with-jquery-ajax">Invisible ReCaptcha with jQuery ajax</a>
  <a href="https://stackoverflow.com/questions/49158855/invisible-recaptcha-ajax-call">Invisible reCaptcha AJAX Call</a>
  <a href="https://stackoverflow.com/questions/48411167/google-invisible-recaptcha-using-jquery-ajax-and-php">Google Invisible Recaptcha Using Jquery Ajax and PHP</a>
  <a href="https://stackoverflow.com/questions/45974166/ajax-form-with-google-invisible-recaptcha">Ajax Form With Google Invisible Recaptcha</a></p>
  
  <p>I am building the site in Umbraco, now i was under the impression i can verify the google recaptcha result, using ajax or javascript?</p>
  
  <p>Here is the post which works;</p>
  
  <pre><code>$.ajax({
              type: "POST",
              url: "https://www.kulahub.net/Api/FormAdd",
              data: $('#kulaHubForm').serialize(),
              datatype: "html",
              success: function (data) {
                  console.log("Success Posted");
                  localStorage.setItem("isSubbed", "1");
              },
              error: function (jqXHR, textStatus, errorThrown) { 
                  console.log("bad");
              }
          });
  </code></pre>
  
  <p>And here is the form</p>
  
  <pre><code>&lt;form id="kulaHubForm" data-toggle="validator" novalidate="true"  class="newsletter-signup"&gt;
      &lt;fieldset&gt;
      &lt;legend&gt;Subscribe to our Newsletter »&lt;/legend&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-md-4" style=""&gt;
              &lt;div class="form-group" style="position: static;"&gt;
                  &lt;label for="fname"&gt;First Name&lt;/label&gt;
                  &lt;input type="text" id="fname" class="form-control" name="first_name" placeholder="First Name" required&gt;
                  &lt;div class="help-block with-errors"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4" style=""&gt;
              &lt;div class="form-group" style="position: static;"&gt;
                  &lt;label for="lname"&gt;Last Name&lt;/label&gt;
                  &lt;input type="text" id="lname" class="form-control" name="last_name" placeholder="Last Name" required&gt;
                  &lt;div class="help-block with-errors"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4" style=""&gt;
              &lt;div class="form-group" style="position: static;"&gt;
                  &lt;label for="eadd"&gt;Email Address&lt;/label&gt;
                  &lt;input type="email" id="eadd" class="form-control" value="@email" name="email" placeholder="Email" required&gt;
                  &lt;div class="help-block with-errors"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4" style=""&gt;  
              &lt;div class="form-group" style="position: static;"&gt;
                  &lt;label for="cname"&gt;Company Name&lt;/label&gt;
                  &lt;input type="text" id="cname" class="form-control" name="custom_company" placeholder="Company Name" &gt;
                  &lt;div class="help-block with-errors"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          @*Honeypot*@
              &lt;input type="checkbox" id="conCheckBox" name="conCheckBox" value="value1" style="display:none !important" tabindex="-1" autocomplete="off"&gt;
              &lt;input type="text" name="flowers" id="flowers" style="" tabindex="-1" autocomplete="off"/&gt;
              &lt;input type="text" name="daisys" id="daisys" value="Subscription Form SAN" style="display:none !important;color:black !important;" tabindex="-1" autocomplete="off"&gt; 
          @*End Honey, Pot?*@
  
          &lt;div class="col-md-4" style=""&gt;  
              &lt;div class="form-group" style="position: static;"&gt;
                  &lt;label for="jtitle"&gt;Job Title&lt;/label&gt;
                  &lt;input type="text" id="jtitle" class="form-control" name="custom_position" placeholder="Job Title" &gt;
                  &lt;div class="help-block with-errors"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4" style=""&gt;  
              &lt;div class="form-group" style="position: static;"&gt;
                  &lt;label for="telno"&gt;Telephone Number&lt;/label&gt;
                  &lt;input type="text" id="telno" class="form-control" name="custom_telno" placeholder="Telephone Number" required&gt;
                  &lt;div class="help-block with-errors"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-12"&gt;
              &lt;input type="hidden" name="ClientId" value="XXX"&gt;
              &lt;input type="hidden" name="FormTypeId" value="XXXX"&gt;
              &lt;input type="hidden" name="redirect" value=""&gt;
              &lt;button class="g-recaptcha" data-sitekey="my site key" data-callback='onSubmit'&gt;Submit&lt;/button&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And the full call here</p>
  
  <pre><code>&lt;script src="https://www.google.com/recaptcha/api.js" async defer&gt;&lt;/script&gt;
      &lt;script&gt;
      function onSubmit(token) {
          $.ajax({
              type: "POST",
              url: "https://www.kulahub.net/Api/FormAdd",
              data: $('#kulaHubForm').serialize(),
              datatype: "html",
              success: function (data) {
                  console.log("Success Posted");
                  localStorage.setItem("isSubbed", "1");
              },
              error: function (jqXHR, textStatus, errorThrown) { 
                  console.log("bad");
              }
          });
          grecaptcha.reset();// to reset their widget for any other tries
      }
      &lt;/script&gt;
  </code></pre>
  
  <p>But I just can't deduce what Google actually wants you to do, I think their documentation is lacking, especially for beginners. </p>
  
  <p>I don't really care which version of Recaptcha I use, I wanted to use the newest but ultimately that looked even less documented than 2 online, so I went with 2 invisible here, but am open to whatever will work.</p>
  
  <p>Is this possible? Thank you</p>