google invisible recaptcha keeps running without execute

Question

I'm trying to use google invisible recaptcha on my web form (php and codeigniter 3). but somehow whenever I click on the Submit button, the google recaptcha keeps generating questions as if ignoring all the other codes before the execute command. so none of the console.log and alert ever appear. what is wrong with my code?

my code looks like this:

HTML

<form id="form_signup" method="post" action="/signup">
  <input type="text" name="username"/>
  <div class="g-recaptcha"
    id="form_signup-recaptcha"
    data-size="invisible"
    data-sitekey="<?php echo $mysitekey; ?>"
    data-callback="onSubmitFormSignupUser">
  </div>
  <button type="button" id="formSignup-btnSubmit">
    Submit
  </button>
</form>

JS

var widgetId = '';

var onLoadRecaptcha = function() {
    widgetId = grecaptcha.render('formSignup-btnSubmit', {
        'sitekey' : $('#form_signup-recaptcha').attr('data-sitekey'),
        'callback' : $('#form_signup-recaptcha').attr('data-callback'),
    });
};

var onSubmitFormSignupUser = function(response) {
    console.log('response', response);

    if ($('[name="username"]').val()) {
        alert('yes');
        grecaptcha.execute(widgetId);

        doSubmitFormToServer('#form_signup');
    }
    else {
        alert('no');
        grecaptcha.reset(widgetId);
    }
}

var doSubmitFormToServer = function(selector) {
    var myData = $(selector).serializeArray();

    console.log('send form data', myData);
}

Answer 1

it turns out that the solution is so simple.

this code

var onLoadRecaptcha = function() {
  widgetId = grecaptcha.render("formSignup-btnSubmit", { // wrong element ID
    sitekey: $("#form_signup-recaptcha").attr("data-sitekey"),
    callback: $("#form_signup-recaptcha").attr("data-callback")
  });
};

should be like this

var onLoadRecaptcha = function() {
  widgetId = grecaptcha.render("form_signup-recaptcha", { // corrent element ID
    sitekey: $("#form_signup-recaptcha").attr("data-sitekey"),
    callback: $("#form_signup-recaptcha").attr("data-callback")
  });
};

because the recaptcha element is like this

<div 
  class="g-recaptcha" 
  id="form_signup-recaptcha" 
  data-size="invisible" 
  data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" 
  data-callback="onSubmitFormSignupUser">
</div>

so basically the parameters for grecaptcha.render should follow the properties in the element that has g-recaptcha class. my mistake was that I used the button id, even though the element with g-recaptcha class was the div.

I don't remember reading about this particular thing in the documentation. I guess I'm too stupid to realize that before this.. I hope this makes things clear for others with the same problem.

Answer 2

Well, you had a typo in the id, at least, here id="form_signup-recaptcha" and here: 'sitekey' : $('#formSignup-recaptcha').attr('data-sitekey'),, other than that, it is not clear, was it invoked at all, or not, as you've not provided the part of including the script, which should contain ?onload=onLoadRecaptcha parameter.

The code is below, but it won't work here, because of null origin. Check Codepen instead: https://codepen.io/extempl/pen/abOvBZv

sitekey used is one is for testing purposes only, as described here: https://developers.google.com/recaptcha/docs/faq#id-like-to-run-automated-tests-with-recaptcha-v2-what-should-i-do

var widgetId = "";

var onLoadRecaptcha = function() {
  widgetId = grecaptcha.render("formSignup-btnSubmit", {
    sitekey: $("#form_signup-recaptcha").attr("data-sitekey"),
    callback: $("#form_signup-recaptcha").attr("data-callback")
  });
};

var onSubmitFormSignupUser = function(response) {
  console.log("response", response);

  if ($('[name="username"]').val()) {
    grecaptcha.execute(widgetId);
    doSubmitFormToServer("#form_signup");
  } else {
    $(".status").text("failed");
    grecaptcha.reset(widgetId);
  }
};

var doSubmitFormToServer = function(selector) {
  var myData = $(selector).serializeArray();
  $(".status").text("submitted");

  console.log("send form data", myData);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=onLoadRecaptcha"></script>

<body>
  <form id="form_signup" method="post" action="/signup">
    <input type="text" name="username" />
    <div 
      class="g-recaptcha" 
      id="form_signup-recaptcha" 
      data-size="invisible" 
      data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" 
      data-callback="onSubmitFormSignupUser">
    </div>
    <button type="button" id="formSignup-btnSubmit">
    Submit
  </button>
    <span class="status"></span>
  </form>
</body>