82

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>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
thanks_in_advance
  • 2,603
  • 6
  • 28
  • 44
  • 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? – jeroen May 03 '15 at 19:20
  • 1
    @jeroen People with javascript disabled are an edge case that I'm willing to forego so as to avoid spam-bots. – thanks_in_advance May 03 '15 at 21:13
  • 1
    Is method actually safe? Can't a spam bot still submit the form without a submit button of any kind? – daniel blythe May 26 '15 at 20:12
  • @user1883050, you have not marked an answer as correct. Did you get this working? – colecmc May 28 '15 at 22:20
  • 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? – Gediminas Šukys Jun 19 '17 at 15:19

1 Answers1

167

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;
 }
starball
  • 20,030
  • 7
  • 43
  • 238
panda.o24
  • 1,888
  • 1
  • 13
  • 14
  • 2
    Minor correction (remove the brackets after the function name): `
    `     – Caedmon Jun 17 '15 at 13:58
  • 4
    @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? – ifinlay Jul 28 '15 at 11:41
  • 1
    @ifinlay The validation screen is rendered into an – lee Sep 24 '15 at 19:43
  • 1
    If you use the gcaptcha.render() function, [the syntax is different](https://developers.google.com/recaptcha/docs/display#render_param). It is `'callback' : functionName` in the options. – lee Sep 25 '15 at 01:03
  • 3
    You mean `var enableBtn = function(){` – mplungjan Jan 03 '16 at 13:26
  • 20
    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. https://developers.google.com/recaptcha/docs/display – Blazemonger Sep 27 '16 at 16:33
  • I tried this `div class="g-recaptcha" data-sitekey="yyyyyyyyyy__xxxxxxxx" data-callback="enableBtn"> ` not working – WordCent Aug 26 '18 at 12:37
  • 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. and this will still work – RaRdEvA Oct 17 '18 at 15:19
  • what about multiple buttons? – Toskan Jan 10 '19 at 05:21
  • 2
    what if somebody enable that button by browser developer tool – Ankit Kumar Verma Aug 03 '20 at 13:11
  • 1
    @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. – Mhluzi Bhaka Oct 23 '20 at 20:45