Multiple reCAPTCHAs in one ASP.Net page

问题:

It is possible to add multiple reCAPTCHAS in one form? I tried doing so, even giving the multiple reCAPTCHAS different IDs, but when I load the page in the browser, only one of them is shown.

Is this by design? I need the two reCAPTCHAS because one is for Login, and the other one is for the Register form, which will be shown on the same page.

Thanks! WT

回答1:

Only one Cpatcha is supported in a page at any time. What you can do is use AJAX and lod captcha after the form is loaded.

This might of some help.

回答2:

After a quick google search, it appears that it's not currently possible. One suggestion I saw was to pop up a modal recaptcha just as the user submits the form. ondemandcaptcha for Ruby.

回答3:

I was initially lead by this thread to believe there is no simple answer, but after digging through the Recaptcha ajax library I can tell you this isn't true! TLDR, working jsfiddle: http://jsfiddle.net/Vanit/Qu6kn/

It's possible to overwrite the Recaptcha callbacks to do whatever you want with the challenge. You don't even need a proxy div because with the overwrites the DOM code won't execute. Call Recaptcha.reload() whenever you want to trigger the callbacks again.

function doSomething(challenge){
    $(':input[name=recaptcha_challenge_field]').val(challenge);
    $('img.recaptcha').attr('src', '//www.google.com/recaptcha/api/image?c='+challenge);
}

//Called on Recaptcha.reload()
Recaptcha.finish_reload = function(challenge,b,c){
    doSomething(challenge);
}

//Called on page load
Recaptcha.challenge_callback = function(){
    doSomething(RecaptchaState.challenge)
}

Recaptcha.create("YOUR_PUBLIC_KEY");

回答4:

It is now possible to do this easily with explicit recaptcha creation. See my answer here:

How do I show multiple recaptchas on a single page?

回答5:

It's not too difficult to load each Recaptcha only when needed using the Recaptcha AJAX API, see my post here:

How do I show multiple recaptchas on a single page?

回答6:

the captcha has an img element #recaptcha_challenge_image element , so after you set the recaptcha in one div say "regCaptch",get that img src attr ,set your other captcha div html to the old one html and then set the #recaptcha_challenge_image src to the src you get , here is a working example

    var reCaptcha_src = $('#recaptcha_challenge_image').attr('src');
    $('#texo').html($('#regCaptch').html());
    $('#recaptcha_challenge_image').attr('src',reCaptcha_src);