0

I have a disabled submit button that I can't seem to enable after BOTH a successful Google reCaptcha and checking there is text in an input box.

I'm using the HTML and 2 separate JS files below but the JS files only seem to work individually and not together. Is there a way to verify the reCaptcha and check the text box is filled together? I can't find any similar answer.

HTML:

<input type="text" name="em" ID="em" class="form-item input-address" placeholder="Email"></input>
<button type="submit" class="submit start" id="button1" alt="Submit" disabled="disabled"></button>
</br>
<?php foreach ($_POST as $key=> $value) { echo '
<p><strong>' . $key.':</strong> '.$value.'</p>'; } ?>
<div class="g-recaptcha" data-sitekey="{key}" data-callback="enableBtn"></div

recaptcha.js (this works on its own):

//Disable Button if No reCaptcha
$("#button1").prop("disabled", true);

function enableBtn() {
$("#button1").removeAttr('disabled');
}

What I'd like to do is also have the button disabled if there is no text in the input area. I have tried this and it works:

input.js (this also works on its own but not with recaptcha.js):

//Disable Button if Input Empty
$(document).ready(function() {
$('.input-address').keyup(function() {

var empty = false;
$('.input-address').each(function() {
if ($(this).val().length == 0) {
empty = true;
}
});

if (empty) {
$("#button1").prop("disabled", true);
} else {
$("#button1").removeAttr('disabled');
}
});
});
0gits
  • 35
  • 1
  • 5
  • See this similar question: https://stackoverflow.com/questions/29752659/how-to-make-google-recaptcha-a-required-field/29760366?s=1|6.2755#29760366 – colecmc Sep 14 '17 at 16:19
  • Thanks. I'll see if I can get that to work. – 0gits Sep 15 '17 at 06:20

1 Answers1

1

I'm assuming that you're using the programmatic version of Recaptcha. You first need to include a callback in your recaptcha call. Something like this

recaptchaWidget1 = grecaptcha.render('recaptchaDiv1', {
     'sitekey'  : 'site-key-goes-here',
     'theme'        : 'light',
     'callback' : 'enableBtn'
});

Alternatively you can set up a callback using the data attributes

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

Next do the callback: 

var enableBtn = function () {
    $("#button1").removeAttr('disabled');
}

That's about it. As long as the callback is there it should work.

Larry C. Lyons
  • 374
  • 1
  • 8