CODEWITHSUNDEEP
javascriptphpjquerybootstrap-modalrecaptcha
Jay Kareliya
Jay Kareliya

Reputation: 770

Google reCAPTCHA failed for second time on the bootstrap model

I have a form with multiple fields & google recaptcha which I open in popup model.For the first time everything work well.

enter image description here

But when I close popup and try to open popup second time at that time I got error "Not Found.The requested url was not found on this server". enter image description here

Here is my HTML code:

  <div id="RecaptchaField2"></div>

Javascript :

<script type='text/javascript'>
  var CaptchaCallback = function() {
      if ( $('#RecaptchaField2').length ) {
        grecaptcha.render('RecaptchaField2', {'sitekey' : 
            '6LdG1ioUAAAAANOH2BnJO_5zv0NE2UNZS9jou7Yh'
       });
      }
   }

    $(".inq-button").click(function(){
      setTimeout(function() {
          var script = document.createElement('script');
          script.src = 'https://www.google.com/recaptcha/api.js?
          onload=CaptchaCallback&render=explicit';
          script.type = 'text/javascript';
         document.body.parentNode.appendChild(script);         
     }, 100); 
   });
</script>

This problem is torturing me since last week and I still couldn't figure out why it happens.

Would you please give me proper suggestion about this?

Any kind of help would be highly appreciated.

Thanks in advance.

Upvotes: 3

Views: 1231

Answers (2)

Mandip Vora
Mandip Vora

Reputation: 309

Use this script, It will working.

<script>
    var CaptchaCallback = function() {
    if ( $('#RecaptchaField1').length ) {
        grecaptcha.render('RecaptchaField1', {'sitekey' : '6LdG1ioUAAAAANOH2BnJO_5zv0NE2UNZS9jou7Yh'
        });
    }
    if ( $('#RecaptchaField2').length ) {
       grecaptcha.render('RecaptchaField2', {'sitekey' : '6LdG1ioUAAAAANOH2BnJO_5zv0NE2UNZS9jou7Yh'
       });
    }
}

var j = 1;

$(".inq-button").click(function(){


   setTimeout(function() {
    if(j){
      var script = document.createElement('script');
      script.src = 'https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit';
      script.type = 'text/javascript';
      document.body.parentNode.appendChild(script);
 }
 else
 {
    $('#RecaptchaField2').empty();
    removejscssfile("api.js", "js"); //remove all occurences of "somescript.js" on page
    var onloadCallback = function() {

        if ( $('#RecaptchaField2').length ) {
            grecaptcha.render('RecaptchaField2', {'sitekey' : '6LdG1ioUAAAAANOH2BnJO_5zv0NE2UNZS9jou7Yh'
       });


    }
    }; 
    var script = document.createElement('script');
    script.src = 'https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit';
    script.type = 'text/javascript';
    document.body.parentNode.appendChild(script);
   }

   j = 0;

   }, 100);

   });  


 function removejscssfile(filename, filetype){
    var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from
    var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
    var allsuspects=document.getElementsByTagName(targetelement)
    for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
    if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
    allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()
  }
}
</script>

Upvotes: 1

Chandra Kumar
Chandra Kumar

Reputation: 4205

You should need to clear captcha before render is grecaptcha.reset()

However, in order for this function to work you have to render the reCaptacha explicitly like this : 

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

Upvotes: 1

Related Questions