CODEWITHSUNDEEP
javascripthtmlrecaptchainvisible-recaptchagrecaptcha
Itay
Itay

Reputation: 16785

Invisible reCaptcha iframe not showing, form stuck

I am loading two scripts on my websites:

<script src="scripts/my_site.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async="" defer=""></script>

Where my_site.js looks like this:

... many other functions, not nested

function captachaCallback() {
    console.log("Captcha");
}

... other functions

Then in my form I am using:

<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback">Send</button>

Whenever I press the button, a white half-transparent overlaying empty div appears, but nothing happens (console message doesn't appear) and the form is stuck.

click picture

I am using the latest Chrome.

Thanks in advance

Upvotes: 3

Views: 3426

Answers (3)

Itay
Itay

Reputation: 16785

The problem was that I had a CSS setting affecting all divs on my website.

div { overflow: hidden; }

Apparently this makes the popup window with the captcha test invisible.

Removing this setting solved the problem.

Upvotes: 3

Nithish
Nithish

Reputation: 6019

I'm suspecting that the element is going out of the visibility. So can you try adding data-badge="inline" to the recaptcha element in the html

<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-badge="inline" data-callback="captachaCallback">Send</button>

Hope this helps.

Upvotes: 1

SrPanquesito
SrPanquesito

Reputation: 1

You're not rendering the captcha.

The submit button is trying to verify the response of the captcha once the user completes the captcha by sending a callback to the function specified on data-callback. Since you haven't created the component it gets stuck in a loop.

  1. The submit button cannot be the same tag where you load the CAPTCHA. You need to render the captcha in an empty tag.

Instead of:

    <button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback">Send</button>

Render it like:

    <div id="captcha_element" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback"></div>
  1. Wrap it up inside a form. You already have it, so just modify it.

Since you're specifying what function to run once the captcha is completed you don't need to worry about the submit button.

The structure should look something like this:

    <form action="?" method="POST">
      /// The other elements in your form
      /// ...
      <div id="captcha_element" class="g-recaptcha" data-sitekey="my-key" data-callback="captachaCallback"></div>
      <br/>
      <input id="btnSubmit" type="submit" value="Submit">
    </form>

Also be sure to look up the documentation ;)

https://developers.google.com/recaptcha/docs/display

Upvotes: -1

Related Questions