使用Ajax将reCaptcha令牌发送到PHP

Question

I want to add reCaptcha V3 to a form.

Here is the form:

<form action="mail.php" method="POST">
    <!-- This hidden input will contain the token -->
    <input type="hidden" name="token" id="token" />
    <input type="text" name="name" />
    <input type="text" name="email" />
    <textarea name="message"></textarea>
    <input type="submit" name="submit" value="Send" />
</form>

Now I'm trying to send the token value to mail.php , So there is a plugin called jquery.form I use it to send the Ajax request.

Here is the Javascript/Jquery code:

$('form').ajaxForm({

    beforeSubmit: function() {

        //Captcha part
        grecaptcha.ready(function() {

                grecaptcha.execute('My_website_key', {action: 'form'}).then(function(token) {

                    //Set token value to the hidden element
                    $('#token').val(token);

                });

        });//reCaptcha ready    

    },//Before submit function
    success: function(msg) {

        if(msg == 'Message has been sent.'){
            console.log('success!');
        }else{
            console.log(msg);
        }

    },//success function
    complete: function(xhr) {

        console.log(xhr.responseText);  

    }//complete function

});//End Ajax

When I submit the form, Then I look at the console, I see that the token was empty and it seems that the success function is executed, Before the token hidden element gets the token.

I can't add the token when the page loads or any other action, Because it expires after 2 minutes, So I need to get aa token and send it to the PHP file.

Answer 1

You need to move your ajax request in the recaptcha handler because beforeAjax will not wait for the its contents to be resolved, change your code as follows:

 // Fake grecaptcha method !!! you should delete this // Form URL was changed as well to satisfy the example let grecaptcha = { ready: function(cb) { cb(); }, execute: function(key, options) { return Promise.resolve('recaptchatoken'); } }; let formElem = $('form'); formElem.submit(function(e) { e.preventDefault(); let thisForm = $(this); grecaptcha.ready(function() { grecaptcha.execute('My_website_key', { action: 'form' }).then(function(token) { $('#token').val(token); thisForm.ajaxSubmit({ success: function(msg) { if (msg == 'Message has been sent.') { console.log('success!'); } else { console.log(msg); } }, complete: function(xhr) { console.log(xhr.responseText); } }); }); }); return false; // false = prevent submit }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://malsup.github.io/min/jquery.form.min.js"></script> <form action="//reqres.in/api/users" method="POST"> <!-- This hidden input will contain the token --> <input type="hidden" name="token" id="token" /> <input type="text" name="name" /> <input type="text" name="email" /> <textarea name="message"></textarea> <input type="submit" name="submit" value="Send" /> </form>