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>
Improve this question
5
  • 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 3, 2015 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 3, 2015 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, 2015 at 20:12
  • @user1883050, you have not marked an answer as correct. Did you get this working?
    – colecmc
    May 28, 2015 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, 2017 at 15:19

2 Answers 2

Reset to default
168

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;
 }
Improve this answer
11
  • 2
    Minor correction (remove the brackets after the function name): <div class="g-recaptcha" data-sitekey="############-#####" data-callback="enableBtn"></div>
    – Caedmon
    Jun 17, 2015 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, 2015 at 11:41
  • 3
    You mean var enableBtn = function(){
    – mplungjan
    Jan 3, 2016 at 13:26
  • 21
    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
    – Blazemonger
    Sep 27, 2016 at 16:33
  • 2
    what if somebody enable that button by browser developer tool
    – Ankit Kumar Verma
    Aug 3, 2020 at 13:11
0

How i pass params in enableBtn("signin")

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.