problems using google invisible recaptcha icon

Question

I have a form in my codeigniter project using google's invisible recaptcha like so:

HTML

<html>
<head>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  <script>
  function onSubmitInvisRecaptcha(token) {
    document.getElementById("contact_us-form").submit();
  }
  </script>
</head>
<body>
<form id="contact_us-form" method="post" action="/info/contact_us">
  <div>
    <label>full name</label>
    <input type="text" name="full_name" value="<?php echo $this->input->post('full_name'); ?>"/>
  </div>
  <div>
    <button type="submit" 
    id="submit_btn" 
    class="btn my-other-styles g-recaptcha"
    data-sitekey="<?php echo $sitekey; ?>" 
    data-callback="onSubmitInvisRecaptcha">
      Submit
    </button>
  </div>
</form>
</body>
</html>

PHP

defined('BASEPATH') OR exit('No direct script access allowed');

class Info extends MY_Controller 
{
  function contact_us()
  {
    print_r($_POST);
  }
}

from my code I, I have 2 problems: (I hope it's ok to ask about multiple problems in 1 post)

the recaptcha icon is nowhere to be found in the page. I've checked the sitekey I use in the form is the same as the one I find in www.google.com/recaptcha/admin.
in the contact_us function, the print_r($_POST); there is no g-recaptcha-response..

P.S.: the form is a part of another page that is shown using ajax so the form is wrapped by another <div>.

@Jerodev no. the browser console is clean. Just warnings about Synchronous XMLHttpRequest on the main thread is deprecated.. — dapidmini, Aug 16 '19 at 09:47
https://developers.google.com/recaptcha/docs/invisible#auto_render: _“The necessary attributes are a class name 'g-recaptcha', […]”_ — misorude, Aug 16 '19 at 11:43
@misorude oh sorry, in my actual project, the submit button already has the class 'g-recaptcha'.. I'll edit my question now. — dapidmini, Aug 18 '19 at 12:51

score 0 · Answer 1 · answered Aug 19 '19 at 06:19

finally I've found the answer from this SO answer. The link shows a code for multiple recaptcha/form in one page, but it's simple enough to understand and modify for my needs.

basically, if I understand correctly, the reason my code failed was because of these points:

I need to use a separate <div> element to apply the recaptcha instead of the submit button.
google recaptcha will try to find the appointed element when the page loads, otherwise, I need to render and execute the grecaptcha manually using javascript if the element only appears or added to the page after some action.

problems using google invisible recaptcha icon

1 Answers1