google recaptcha and 2 or more form in one page issue

Question

I try work with new google recaptcha.

I have several form in one page. So I want define for per form, one recpatcha.

Also I want send form via jQuery...

So I do this:

first:

<script src="//www.google.com/recaptcha/api.js?hl=fa&onload=CaptchaCallback&render=explicit" async defer></script>
    <script type="text/javascript">
    var CaptchaCallback = function(){
        grecaptcha.render('RecaptchaField1', {'sitekey' : '<?php echo SITERECAPTCHAT;?>'});
        grecaptcha.render('RecaptchaField2', {'sitekey' : '<?php echo SITERECAPTCHAT;?>'});
    };
    </script>

And here is sample forms code:

<form id="form1">  //form 1
<div id="RecaptchaField1"></div>
</form>

<form id="form2">  //form 2
<div id="RecaptchaField2"></div>
</form>

And finaly jquery code:

$.post('index.php?id=form1', {
        recaptcha: $('#g-recaptcha-response').val(),
        async: true
       }).done(function(data){...


$.post('index.php?id=form2', {
        recaptcha: $('#g-recaptcha-response').val(),
        async: true
       }).done(function(data){...

Now in target page of jquery, If I print $_post:

foreach ($_POST as $key => $value)

for form1, It prints recaptcha value. so it works.

but for form 2 it is empty.

what is my wrong?

Answer 1

solved by this google guide.

https://developers.google.com/recaptcha/docs/display

hope helps others for same problem.