javascript - Multiple Recaptcha on same page disappearing on failed submit? -

i have 2 ajax forms on page both partial views. both have recaptcha , can't seem find way recaptcha's reload after forms have been submitted , failed validation.

the recaptcha's loaded explicitly , have 2 problems, firstly if use:

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

on both forms receive 'uncaught error recaptcha placeholder element must empty'. can't that. if put above loaded overall layout entire page have second problem recpatcha's not reload once form has been submitted incorrectly.

the script loads each recaptcha follows:

var recaptcha1; var recaptcha2; var mycallback = function () {      //render recaptcha1 on element id "recaptcha1"     recaptcha1 = grecaptcha.render('recaptcha1', {         'sitekey': 'sitekeyhere',          'theme': 'light'     });       //render recaptcha2 on element id "recaptcha2"     recaptcha2 = grecaptcha.render('recaptcha2', {         'sitekey': 'sitekeyhere',          'theme': 'light'     }); 

the recaptcha's in forms like:

<div id="recaptcha1"></div> 

i using mvc 5, controlller action form submit this:

public async system.threading.tasks.task<actionresult> formsubmit(contactform model, string whichpage)     {if (modelstate.isvalid && status)          {*updates database/sends email here*  else         {              return partialview("_contactform", model);          } 

i've tried variety of combinations different things loaded in different places can't find combination works no errors. best way can have both recaptcha's on respective forms when either form has been submitted , failed validation?

i had similar issue on form submissions via ajax. issue when form returns , calls callback function, wants render both recaptchas in both forms. since 1 recaptcha rendered, other recaptcha breaks. render recaptcha in proper form, add following if statements check if recaptcha rendered in respected container. example using jquery.

var mycallback = function () {   if($('#recaptcha1').is(':empty')) {     grecaptcha.render('recaptcha1', {       'sitekey': 'sitekeyhere',        'theme': 'light'     });   }    if($('#recaptcha2').is(':empty')) {     grecaptcha.render('recaptcha2', {       'sitekey': 'sitekeyhere',        'theme': 'light'     });    } } 

you need make sure both recaptcha placeholder elements in respected forms.

<form name="form1">   [...]   <div id="recaptcha1"></div> </form>  <form name="form2">   [...]   <div id="recaptcha2"></div> </form>