Comment vous assurer que le fichier re-captcha js a été chargé avant de soumettre un formulaire?

Question

J'ai une recaptcha et un formulaire d'inscription. Voici une version simple d'un gestionnaire:

//my_script.js 

    document.getElementById("my_form").onsubmit = function(e) { 
    e.preventDefault(); 
    grecaptcha.execute(); 
    var grecap_resp = grecaptcha.getResponse(); 
    if (grecap_resp.length !== 0) { 

Et les fichiers js:

<script src="my_script.js"></script> 
<script src="https://www.google.com/recaptcha/api.js" async defer></script> 

Parfois, je dois cliquer deux fois sur le bouton Envoyer. Je crois que c'est dû au fait que "recaptcha/api.js" n'a pas encore été chargé quand je clique sur le bouton. Comme je peux le voir, quand il a été chargé, tout fonctionne bien.

Comment puis-je résoudre ce problème?

Answer 1

Comme the docs say, vous pouvez passer un paramètre onload avec un nom de fonction qui sera appelée quand il est chargé:

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

Et dans votre my_script.js:

window.recaptchaLoaded = function() { // "window..." so is defined on the global scope 
    console.log("Yay! captcha loaded"); // Here you should add your logic to show/enable the button that is disabled/hidden by default. 
}