how to enable Multiple reCAPTCHA in single page

Question

i have implemented two recaptcha in single page , but only one is recaptcha is working

My code is for the captcha 1

    <div class="resumator-label resumator-resume-text" id="resumator-recaptcha_forward-label">Human Check*</div>
    <div class="resumator-input" id="resumator-recaptcha_forward-field">
        <div id="div_error_resumator-forward-recaptcha-value" class="dv_error"><span>Please enter the text:</span></div><script type="text/javascript" src="//www.google.com/recaptcha/api/challenge?k=6Ld99tsSAAAAAIy-Zv3YKxCOefk2IXELOBVNhM7Y"></script>

<noscript>
    <iframe src="//www.google.com/recaptcha/api/noscript?k=6Ld99tsSAAAAAIy-Zv3YKxCOefk2IXELOBVNhM7Y" height="300" width="500" frameborder="0"></iframe><br/>
    <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
    <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>
    </div>

Code for the other other captcha

         <div class="resumator-field-wrapper resumator-resume-text" id="resumator-recaptcha">
    <div class="resumator-label resumator-resume-text" id="resumator-recaptcha-label">Human Check*</div>
    <div class="resumator-input" id="resumator-recaptcha-field">
        <script type="text/javascript" src="//www.google.com/recaptcha/api/challenge?k=6Ld99tsSAAAAAIy-Zv3YKxCOefk2IXELOBVNhM7Y"></script>

<noscript>
    <iframe src="//www.google.com/recaptcha/api/noscript?k=6Ld99tsSAAAAAIy-Zv3YKxCOefk2IXELOBVNhM7Y" height="300" width="500" frameborder="0"></iframe><br/>
    <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
    <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>
    </div>
</div>

I have also use clone that is work fine

// Duplicate our reCapcha

         $('#resumator-recaptcha-label').html($('#resumator-recaptcha_forward').clone(true,true));

problem in the clone captcha its reload captcha and other links are not working for the new clone captcha

possible duplicate of [How do I show multiple recaptchas on a single page?](http://stackoverflow.com/questions/1241947/how-do-i-show-multiple-recaptchas-on-a-single-page) — Huseyin Yagli, Jan 24 '15 at 15:18
Check my answer to a similar question here: [How can I access multiple individual recaptcha responses from the same page?](https://stackoverflow.com/questions/29315369/how-can-i-access-multiple-individual-recaptcha-responses-from-the-same-page/38558912#38558912) — Michael Moriarty, Jul 14 '17 at 02:41

score 5 · Accepted Answer · answered Mar 18 '14 at 09:32

you can try this adding new class in a second recaptcha loader button then you bind event on that class with click event and again clone your node and also used setTimeout function which will wait for redraw captcha Hope this will help you

 setTimeout(function() {
        $( "#resumator-recaptcha #recaptcha_widget_div #recaptcha_reload_btn " ).addClass("reload_captcha");


         $(document).on('click', '.reload_captcha', function(e){
             $('#resumator-recaptcha-label').html($('#resumator-recaptcha_forward').clone(true,true));

             $( "#resumator-recaptcha #recaptcha_widget_div #recaptcha_reload_btn " ).addClass("reload_captcha");


        });

    }, 2000);

how to enable Multiple reCAPTCHA in single page

1 Answers1