Estoy creando un formulario para un sitio web en nuestra aplicación CMS que utiliza el nuevo reCaptcha invisible de Google.
Sin embargo, estoy atascado en cómo usar la devolución de llamada de reCaptcha.
Antes del uso del captcha, el código era muy simple:
HTML
<form> Form input fields here... <button id="a23k4l234lj2l-submit-button"></button> </form>jQuery
$('#a23k4l234lj2l-submit-button').click(function (e) { e.preventDefault(); var that = $(this); if(Abayo.validate(that)) { Abayo.submit(that); } }) La biblioteca Abayo tiene funciones para validar formularios específicos y enviar los datos a un script que maneja los datos del formulario.
Ahora, quiero agregar el reCaptcha al formulario. La documentación dice lo siguiente:
1 Cree un div con data-size='invisible'.
<div class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit" data-size="invisible"> </div>2 Llame a grecaptcha.execute desde un método javascript.
grecaptcha.execute();
Esto funciona, pero la función de devolución de llamada del captcha SOLAMENTE me da un código de respuesta para verificar la respuesta del usuario:
La respuesta del usuario, g-recaptcha-response, será la entrada para su función de devolución de llamada.
La respuesta solo me dice si puedo enviar mi solicitud al servidor.
Lo que necesito es la ubicación del botón de envío, el elemento DOM o CUALQUIER tipo de identificación del botón para recuperar los datos del formulario que COINCIDE con el botón.
¿Con el siguiente código no puedo recuperar los datos del formulario y enviarlos al servidor?
$('#a23k4l234lj2l-submit-button').click(function (e) { e.preventDefault(); grecaptcha.execute(); }) var onSubmit = function(response) { // var that cannot be defined, I don't have a DOM element anywhere? var that = ???? if(Abayo.validate(that)) { Abayo.submit(that); } }¿Hay alguna forma de obtener el elemento DOM en la devolución de llamada de reCaptcha?
Puede crear su recaptcha mediante programación.
Primero crea tu captcha div.
<div id="myCaptcha" />Luego renderice el captcha y pase sus datos con token.
var that = $(this); grecaptcha.render('myCaptcha', { sitekey: 'xxx', callback: function(token) { Abayo.submit(token, that) } });Más información aquí https://developers.google.com/recaptcha/docs/invisible#js_api
¿Ha intentado configurar la función onSubmit dinámicamente de esta manera (manteniendo su etiqueta div como está con data-callback="onSubmit" ):
$('#a23k4l234lj2l-submit-button').click(function (e) { e.preventDefault(); var that = $(this); if(Abayo.validate(that)) { window.onSubmit = function(){ // defining onSubmit function dynamically here Abayo.submit(that); // you can access `that` here }; grecaptcha.execute(); } })Nota: no tengo una clave de sitio a mano para verificar este código. Así que considere esto como un enfoque en lugar de una muestra de código de trabajo.