validate 2 recaptchas in memsa page by ajax

Question

Speak blz guys ? I need a help implemented on the same page 3 recaptchas.

<form id='form1'><div class="g-recaptcha" id="Login" data-sitekey="minhakey"></div></form>

<form id='form2'><div class="g-recaptcha" id="reset" data-sitekey="minhakey"></div></form>

<form id='form3'><div class="g-recaptcha" id="email" data-sitekey="minhakey"></div></form>

dai in my file js put the following Cod.

var CaptchaCallback = function(){
    $('.g-recaptcha').each(function(index, el) {
        grecaptcha.render(el, {'sitekey' : 'minhakey'});
    });
};

and finally at the bottom

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer>

So far so good. it generates the page with the 3 Forms and the 3 reCAPTCHAS the problem is in the validation when using the grecaptcha.getResponse() it only works for the first recaptcha. for the other 2 does not work then I googled that if I did it would work

grecaptcha.getResponse(elementId);

so I used var response = grecaptcha.getResponse(reset);

so that by doing this instead of it recording in the Answer variable it makes a request on my page with Answer and my page updates with the url of my site + Answer

http://meusite.com.br/? g-recaptcha-Response=03AHJ_Vuuoeweb5zQIEXqdCkUqMm5lhbDqM4GP7k-Goat-5Yl7CQvjb-Ijrzooie_cs2bbasodsl4odbtpqzcovn6jtyjjagblgpasj9l-zgDhnKo1C3R6eAQIbzYHdcauT05mNyxuBfmw-9XW2e5l2LYLTz59ejc77bWtigD2zWhMnGxV5lwPyB28DAllF12az0ku171lOmxPltn_b7vAwSxSt9Nq43LfsmifTjrleXimpcxM6_ogRrkCA00tGnJAJVlk9LVXd28fgktXo47TDkJCQbPM2YVvE40s0QL9IBbeLBSUmmme8HPaQ4MzMeYYqConltTCbKV0MIk6GwofaUJH8xcuG2xi_iH36zZkTa41vR7Xy2_azCOU6UDA4L-SneOnkmbVoeX8_fb8Y9yMPzCZKobng3usLW8nWr0-ffodj8FENuKrMzYd9LuonTs30eRBqN-EM1ZqfVsS0k-egD6tB89GXLctLhzNOWtC7GbjH7YoCWd1lt9BK_UlSgfnEW27zF0UuRngLoKQVXQVEO5WO40oqkkRiTpWSeZeMCs_Rb5SO3iOOHLByJI4NvPcc3js9er9wq8Fvvo9_lM5KzDcl2vW6k86df-GZJrCJgcloIR3Z7QwhPY-MTCjn7bfYM4onF44AO3LMr0FVUeaC4H59NrF2Vt87nrDVqcP_jiFvbb6RfgQd7SSg1ERFS6kuXLgGDKjmO3amn2IO6GgGdlRl0kpm5ehT3tSaZ1B6EFHn9-Eoz1tTTY2DsNUl-s0JKEK0amDlHtAhwlmJH4Y6QoweWuAWjA0PI451PUtk3lHYqL6afjsWUy_54pLrVTY0q4Sozi90zSyfFYBe_qS1uI_pLixPlBzs38eAwgOeEk7PpF6jW69arIKKb5hLpCV9hoHcySkEUP0SFZz5JS2e5RYaa0aAwZbL_039vhDGtQsoPH4bL_Fd9H6e5bfINDJS7qTVRIQmLp

Please, has anyone ever faced this problem or does anyone know how to solve it? thank you so much;

I did as you said:

var reLogin;
var reLost;
var reRegister;
var onloadCallback = function() {

    var reLogin = grecaptcha.render($('#reLogin')[0], {'sitekey' : '6LcZ-wsUAAAAAOkcUWs5OiVIQW6Td2aIYPf8aMxe'});
    var reLost = grecaptcha.render($('#reLost')[0], {'sitekey' : '6LcZ-wsUAAAAAOkcUWs5OiVIQW6Td2aIYPf8aMxe'});
    var reRegister = grecaptcha.render($('#reRegister')[0], {'sitekey' : '6LcZ-wsUAAAAAOkcUWs5OiVIQW6Td2aIYPf8aMxe'});
};

and my validation on onclick

alert(grecaptcha.getResponse(reLost));

only that the Alert comes Vasio.

Answer 1

The grecaptcha.getResponse(elementId) expects a reference that the grecaptcha.render(el, {'sitekey' : 'minhakey'}) returned to you, not the DOM id (id='reset', id='email', etc.).

I would, for every single one of the camps:

var reset = grecaptcha.render($('#reset')[0], {'sitekey' : 'minhakey'})

grecaptcha.getResponse(reset);

In place of the loop .each that you made.