reCaptcha shared between forms

Question

I have a page where I generate a list of forms based on a database with PHP. I want to implement reCaptcha to prevent bots in the forms. I have two options.

To generate a reCaptcha element for each form. The problem is that I would have to generate programatically a function for each one of the forms submission, so I can use it on reCaptcha data-callback, something like <div class="g-recaptcha" data-sitekey="your_site_key" data-callback='submit_captcha_[formid]'></div> where formid would be inserted through the PHP iteration.
What I though is if I have the option to create a single reCaptcha element that I could share between all forms. But although I tried a lot, I couldn't get to do this. The question is: is there a form to share a submition function between forms?

single common recaptcha? why don't you just require user to fill captcha when he clicks on final submit button — mehulmpt, Mar 30 '17 at 16:12
Because there's many forms with one submit button each. Each one of them would have to have a submition function. It's, at least, kludge. If I have 100 forms with one button each, I would have to have function submit_captcha_1, submit_captcha_2, submit_captcha_3, and so on... — Mateus Felipe, Mar 30 '17 at 16:14
No I do not mean that. Create a common event handler for all the submit button clicks and show them captcha. If success, resume with the form handling — mehulmpt, Mar 30 '17 at 16:15
I saw something like this implemented on this site. http://www.101viamiznerbocaraton.com — Allen, Apr 04 '17 at 03:27

score 1 · Answer 1 · answered Mar 30 '17 at 16:23

1

Give every submit button a common classname and do the following. This is just a pseudo code sort of thing.

<button class="btn1 handleClick someOtherClasses">Submit 1</button>
<button class="btn2 handleClick someOtherClasses">Submit 2</button>
<button class="btn3 handleClick someOtherClasses">Submit 3</button>

<script>
var elems = document.getElementsByClassName('handleClick');
for(i=0;i<elems;i++) {
  elems[i].addEventListener('click', handle, false);
}

function handle(e) {
   var buttonClicked = e.target;
   // verify captcha
   if(!captchaGood) {
      return false;
   }
}
</script>

answered Mar 30 '17 at 16:23

mehulmpt

15,861
12
48
88

The problem is that reCaptcha doesn't work this way. You have to put the callback function on `data-callback` attribute of the html element. – Mateus Felipe Mar 30 '17 at 16:27
@MateusFelipe I do not think so. Check http://stackoverflow.com/a/28044629/2513722 – mehulmpt Mar 30 '17 at 16:29
This doesn't solve my problem. I've already tried it. If I'm going to render the reCaptcha element through JS instead of HTML, it can only ocurr on submission callback, which is the `onload=onloadCallback` part of the `` tag. And being a single callback function, I can't make it render on every form. – Mateus Felipe Mar 30 '17 at 16:42
you do not have to render it on every form. you can render it dynamically in a little popup window or something – mehulmpt Mar 30 '17 at 16:43
So it would not work, cause `grecaptcha.render` function requires a callback function on what to do after submitting the form. I would have to prevent the form submition and then call the form submition inside the recaptcha callback, but as I have only one callback, I couldn't define what form I want to submit. – Mateus Felipe Mar 30 '17 at 16:58
You can make that button clicked global and `captchaGood = true` and programmatically call click on that button in the render callback. That's a ugly hack though – mehulmpt Mar 30 '17 at 17:33

reCaptcha shared between forms

1 Answers1