Google reCaptcha within SweetAlert modal window

Question

I'm working on a function which requires doing a reCaptcha verification within a SweetAlert popup box, but I'm getting the following error:

Uncaught Error: reCAPTCHA placeholder element must be an element or id

I've been looking into what's causing this error, and I notice it's because the element hasn't been loaded yet when it tries to generate the reCaptcha element.

function confirmBox() {
    var div = document.createElement('div');
    div.id = 'recaptcha';
    div.onload = genRecaptcha();

    swal({
        title: "Are you sure?",
        content: div,
        icon: "warning",
        buttons: true,
        dangerMode: true,
    })
}

function genRecaptcha() {
    console.log($('#recaptcha').attr('id'));
    grecaptcha.render('recaptcha', {
        'sitekey': '6Le2ZFUUAAAAAEV4IM_5weEnXg4gVplan2Atgiaj'
    });
}

$('#btn1').click(confirmBox);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>

<button id="btn1">Submit</button>

I'm trying to put the genRecaptcha function with the onload trigger, but it seems to be unable to get the element.

Is there any way to execute the function after the popup box is fully loaded? Or there is something I did wrong here?

@ZubairNazerOliyat appreciated that, but solution of the question will been more than appreciated. :) — Dean, Apr 25 '18 at 06:32

Limon Monte · Answer 1 · 2021-07-02T10:44:56.173

UPD: Here's the live demo: https://sweetalert2.github.io/recipe-gallery/recaptcha.html

Here's the solution with SweetAlert2 - the supported fork of SweetAlert:

function showSweetAlertRecaptcha() {
  Swal.fire({
    title: 'SweetAlert2 + Recaptcha',
    html: '<div id="recaptcha"></div>',
    willOpen: function() {
      grecaptcha.render('recaptcha', {
        'sitekey': '6LdvplUUAAAAAK_Y5M_wR7s-UWuiSEdVrv8K-tCq'
      });
    }, 
    preConfirm: function () {
      if (grecaptcha.getResponse().length === 0) {
        Swal.showValidationMessage(`Please verify that you're not a robot`)
      }
    }
  })
}

#recaptcha > div {
  width: auto !important;
  margin-bottom: .5em;
}

<script src="https://www.google.com/recaptcha/api.js?onload=showSweetAlertRecaptcha"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

With current version 8.2.5 you should use `swal.showValidationMessage( 'Please verify that you're not a robot')` — kojot, Feb 27 '19 at 13:38

score 0 · Accepted Answer · answered Apr 26 '18 at 01:40

Problem solve by using $(element).ready from jquery instead of using .onload

code snippet provided below won't able to function properly because of the recaptcha site key is invalid for this site

function confirmBox() {
    var div = document.createElement('div');
    div.id = 'recaptcha';
    $('#recaptcha').ready(function () {
        console.log($('#recaptcha').attr('id'));
        grecaptcha.render('recaptcha', {
            'sitekey': '6Le2ZFUUAAAAAEV4IM_5weEnXg4gVplan2Atgiaj'
        });
    })

    swal({
        title: "Are you sure?",
        content: div,
        icon: "warning",
        buttons: true,
        dangerMode: true,
    })
}

$('#btn1').click(confirmBox);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>

<button id="btn1">Submit</button>

Google reCaptcha within SweetAlert modal window

2 Answers2

Linked