ReCaptcha 2.0: enable Submit button on callback if recaptcha successful

Question

I have a very simple form as follows. I want to make it so that the Submit button is disabled, and only enabled after the user has successfully completed the ReCaptcha.

I'm assuming I'm going to need some Javascript / jQuery to do this.

Google's documentation on ReCaptcha 2.0 seems really sparse and dense (to me, anyway). I'd appreciate some pointers:

<form action="something.php" method="post">
    Name: <input type="text" size="40" name="name"><br><br>
    <div class="g-recaptcha" data-sitekey="############-#####"></div>
    <input type="submit" value="Submit" >
</form>

Solution

i did the same thing on my test site. however, i used a button instead of submit, so here:

you must add the property data-callback="enableBtn" data-callback property executes the function specified after accomplishment of recaptcha.

<div class="g-recaptcha" data-sitekey="############-#####" data-callback="enableBtn"></div>

and set the id of the button to whatever id you want to and set it to disabled:

<input type="button" value="Submit" id="button1" disabled="disabled">

then on javascript make a function to enable the button

 function enableBtn(){
   document.getElementById("button1").disabled = false;
 }

hope it helps.

Comments

[jeroen]

Assuming that the captcha is the last thing before the submit button, you'll just be introducing a delay for your visitors. And what if javascript is disabled?

[thanks_in_advance]

@jeroen People with javascript disabled are an edge case that I'm willing to forego so as to avoid spam-bots.

[daniel blythe]

Is method actually safe? Can't a spam bot still submit the form without a submit button of any kind?

[colecmc]

@user1883050, you have not marked an answer as correct. Did you get this working?

[Gediminas]

Does anyone tested it in the real world? I think bots doesn't need submit button, they use form url and input fields and posts... Or this is only the part of procedure to do not allow for users to submit form without checking the box?

[Caedmon]

Minor correction (remove the brackets after the function name): <div class="g-recaptcha" data-sitekey="############-#####" data-callback="enableBtn"></div>

[ifinlay]

@panda.o24 Really helpful and this works for me. Bit confused though. Is the captcha already fully verified when the callback is invoked? If so what's the purpose of the secret key that you get issued with when you register? I was assuming that somewhere in the callback Javascript an Ajax call to Google would be necessary? Have I got that wrong?

[Adon]

@ifinlay The validation screen is rendered into an <iframe> injected into the DOM at runtime. The contents of the iframe are responsible for calling Google and doing the validation. You can do the same thing on the server side but this requires the secret key, perhaps to protect against XSS?

[Adon]

If you use the gcaptcha.render() function, the syntax is different. It is 'callback' : functionName in the options.

[mplungjan]

You mean var enableBtn = function(){

[Blazemonger]

There is also a data-expired-callback attribute you should set which can disable the button again if the user waits too long and the captcha check expires. developers.google.com/recaptcha/docs/display

[somethingnow]

I tried this div class="g-recaptcha" data-sitekey="yyyyyyyyyy__xxxxxxxx" data-callback="enableBtn"></div> <button type='submit' class="button" id='send_message'>Send</button> <script type="text/javascript"> document.getElementById("send_message").disabled = true; function enableBtn(){ document.getElementById("send_message").disabled = false; } </script> not working

[RaRdEvA]

Hi there, your solution works perfectly. I would like to comment that is possible to set the << disabled="true"" >> in the input button directly instead of having script to do it. <input type="button" value="Submit" id="button1" disabled="true"> and this will still work

[Toskan]

what about multiple buttons?

[Ankit Kumar Verma]

what if somebody enable that button by browser developer tool

[Mhluzi Bhaka]

@AnkitKumarVerma, you would still need to trap for this serverside - if the button is enabled via console the recaptcha would not be valid so could be caught serverside.