it-swarm.com.de

Wie kann ich mit jQuery/AJAX ein reCaptcha-Formular laden, ohne die reCaptcha-Skripte zu ändern?

Ich lade mein Kontaktformular in meine Seite mit JQuery/AJAX.

Das Kontaktformular enthält die reCaptcha-Skripte.

Leider entfernt JQuery die Skript-Tags, bevor sie in meine Seite eingefügt werden. Diese Skript-Tags werden benötigt, weil sie das Captcha ausgeben. Jetzt hat mein geladenes Formular kein Captcha.

25
eSentrik

Der Link enthält alles, was Sie brauchen: http://code.google.com/apis/recaptcha/docs/display.html

Sie können das Skript nicht in Ajax hinzufügen. Sie sollten vorher die folgende Zeile hinzufügen:

  <script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

Dann können Sie ein Recaptcha-Formular in Ihrem js-Code dynamisch erstellen, indem Sie den folgenden Code hinzufügen:

  Recaptcha.create("your_public_key",
    "element_id",
    {
      theme: "red",
      callback: Recaptcha.focus_response_field
    }
  );
21
benck

@benck, tolle Antwort! Es ist aber etwas veraltet. Die aktuelle Skript-URL lautet:

<script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script>

Und der Code sollte wie folgt aussehen:

grecaptcha.render('element_id', {
    sitekey: recaptchaSiteKey,
    callback: function(response) {
        console.log(response);
    }
});
20
Oleg

Mein Ansatz ist etwas anders:

<script src='https://www.google.com/recaptcha/api.js?render=explicit' async defer></script>
<form>
    <input name="whatEver" type="text">
    <div id="captcha"></div>
    <button>submit</button>
</form>
<script>
var captchaWidgetId = grecaptcha.render( 'captcha', {
    'sitekey' : 'your_site_key'
    'theme' : 'light'
});
$(document).ready(function(){
    $('form').on('click','button', function(e){
        var formDatas = $(this).closest('form').serialize()+'&response='+grecaptcha.getResponse(captcha);
        $.post('post.php', formDatas, function(data){
            //successful
        });
    });
});
</script>
0
szmegma