web-dev-qa-db-fra.com

Comment charger un formulaire reCaptcha avec jQuery/AJAX tout en laissant les scripts reCaptcha en place?

Je charge mon formulaire de contact sur ma page avec JQuery/AJAX.

Le formulaire de contact contient les scripts reCaptcha.

Malheureusement, JQuery supprime les balises de script avant de les insérer dans ma page. Ces balises de script sont nécessaires car elles génèrent le captcha. maintenant mon formulaire chargé n'a pas de captcha.

jqueryajaxcakephprecaptcha
25
eSentrik

Le lien contient tout ce dont vous avez besoin: http://code.google.com/apis/recaptcha/docs/display.html

Vous ne pouvez pas ajouter le script en ajax. Vous devriez ajouter la ligne suivante avant:

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

Ensuite, vous pouvez créer dynamiquement un formulaire recaptcha dans votre code js en ajoutant le code suivant:

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

@benck, bonne réponse! Mais c'est devenu un peu démodé. L'URL du script actuel est:

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

Et le code devrait être comme ci-dessous:

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

Mon approche est un peu différente:

<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