inivisible Google ReCaptcha Integration with Knockout and AJAX Post - ajax

Question

I am trying to integrate the Google Invisible Captcha to my contact form. The integration is working to an extent and I can submit my form and the challenge appears.
However, I assumed that the data-callback added to the div would call my submit function again after the challenge is completed? So currently I have to click the form submit button a second time after the challenge is completed?
I have added the following to my contact form (reduced for brevity);
<div class="col-md-12">
<div class="g-recaptcha"
data-sitekey="mykey"
data-callback="submitForm"
data-size="invisible"
data-bind="formSubmitButton">
</div>
</div>
<div class="col-sm-12 text-center">
<input id="formSubmitButton" data-bind="click: submitForm" type="button" class="btn btn-primary btn-block btn-lg" value="Send Enquiry" />
</div>
and in my submitForm method I have the following code;
this.submitForm = function () {
...
//if no field error validate captcha
if (!error) {
//validate captcha
var response = grecaptcha.getResponse();
if (response.length == 0) {
grecaptcha.execute();
return;
}
}
...
}
I am correct in thinking that I shouldn't need to submit the form a second time? and if so what is it I am doing wrong here please.

Answer 1

You shouldn't need to submit the form twice.
I posted an answer to a similar question about setting up recaptcha with a knockout ajax request.
You may need to restructure how you are setting up your form and functions. I found that you can set up a jquery function to use as the required callback function, that calls your knockout ajax request. Set your button or hidden div to send that as the callback function. I found success by using a button.
You only need to click the button, which does its recaptcha thing (sends a request to google, and then saves its response, which can by accessed later), which then calls your callback function you gave it, which calls your original knockout ajax request. That request will work normally as it did before recaptcha was added, but you will send your recaptcha response like you were getting with: var response = grecaptcha.getResponse(); so your server can validate it.
The link I proved has a more detailed answer, I hope this helps.