reCAPTCHA : Grey out Submit button until backend interaction is finished

Question

I've integrated reCAPTCHA and it is working fine, except for when the users are too quick to click the Submit button right after checking the "I'm not a robot" checkbox. It takes quite some time for reCAPTCHA to register the user action via Ajax, and if they click on Submit too quickly, the g-recaptcha-response is missing, and the validation fails.

Hence my question: how to I grey out the Submit button until g-recaptcha-response value is available?

    <form id="capform" action="/captchaverify" method="POST">
        <div class="g-recaptcha" data-sitekey="..."></div>
        <p>
        <input id="capsubmit" type="submit" value="Submit">
    </form>

Answer 1

I ended up using the data-callback attribute as described in the documentation:

<form action="/captchaverify" method="POST">
    <div class="g-recaptcha" data-sitekey="..." data-callback="capenable" data-expired-callback="capdisable"></div>
    <p>
    <input id="capsubmit" type="submit" value="Submit">
</form>

JavaScript (mootools-based, but the general idea should be clear):

function capenable() {
    $('capsubmit').set('disabled', false);
}
function capdisable() {
    $('capsubmit').set('disabled', true);
}
window.addEvent('domready', function(){
    capdisable();
});