Hora amateur aquí.
Tengo un formulario de contacto HTML existente. No es mi código. Esta es una versión resumida de la misma. Tiene un campo de entrada que es un botón. Hay una función definida para cuando se hace clic en el botón que creo que está envuelto en un selector jQuery. Esta función luego llama a la función de envío del formulario, también envuelta en jQuery.
$("#contact-form .submit-button").on("click", function (e) { $("#contact-form").submit() } $("#contact-form").on("submit", function (e) { })Cuando agrego un reCaptcha, puedo proporcionar una función de devolución de llamada. Quiero llamar directamente a la función de envío del formulario. Lo intenté:
<div style="margin-top:5px;margin-bottom:15px;" id="reCaptcha" data-size="invisible" class="g-recaptcha" data-sitekey="myKey" data-callback="$("#contact-form").submit"></div>Pero, no parece hacer nada. Creo que puedo agregar una función de ayuda, pero ¿hay una forma directa de pasar la función de envío del formulario a este elemento HTML reCaptcha ?
Es probable que esto le brinde un lugar para comenzar; básicamente, desea activar el envío: $("#contact-form").trigger("submit");
Aquí hay una maqueta totalmente no probada:
$("#contact-form").on("click", '.submit-button', function(event) { $(event.delegateTarget).trigger('submit') }); $("#contact-form").on("submit", function(e) { e.preventDefault() console.log('I would submit'); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://www.google.com/recaptcha/api.js?render=your reCAPTCHA site key here"></script> <script> grecaptcha.ready(function() { //request recaptcha token; response is promise grecaptcha.execute('your reCAPTCHA site key here', { action: 'validate_captcha' }) .then(function(token) { // add token value to form document.getElementById('g-recaptcha-response').value = token; //trigger submit $("#contact-form").trigger("submit"); }); }); </script> <form id="contact-form"> <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response"> <input type="hidden" name="action" value="validate_captcha"> mything: <input id="my-thing" /> <button type="submit" name="submit">Submit Me</button> </form>