CODEWITHSUNDEEP
javascriptruby-on-railsrecaptcha
Matthew Berman
Matthew Berman

Reputation: 8631

How to reload the google recaptcha widget after user submits invalid inputs

I have a registration form with the new google recaptcha widget on it. When a user submits info, we check the validation with javascript and return the problems to the page (ex: "please use a valid phone number"). however, since the page doesn't reload, when the user enters correct info and goes to submit again (without having to do the recaptcha again)...the recaptcha is no longer valid and they can't submit without reloading the page.

is there a good solution to this? can I reload the widget somehow? i tried grecaptcha.render but it didn't really do anything.

EDIT:

When I try to render the widget again, it says "placeholder element must be empty"

I tried emptying the element which seemed to work ($('.g-recaptcha').empty();) and then rendering but it still threw the same error.

Upvotes: 35

Views: 84613

Answers (11)

simsketch
simsketch

Reputation: 3052

If you're using WordPress, make sure you don't have another reCaptcha plugin installed...that was the issue for me.

Upvotes: 1

spielbug
spielbug

Reputation: 1371

Personnaly I reset my element html content with

$('#captcha').html('');

after that I reload recaptcha using

$.getScript("https://www.google.com/recaptcha/api.js");

which load recaptcha content on your

<div id="captcha" class="g-recaptcha" data-sitekey="yourSitePublicKey"></div>

Upvotes: 8

Utsav Kundu
Utsav Kundu

Reputation: 11

<script>
function cform(token) {
$.ajax({
type: 'POST',
url: 'contact_chk.php',
data: $('#cform').serialize(), 
success: function(response) {
grecaptcha.reset();
$("#con_msg").html(response);
document.getElementById("name").value='';
document.getElementById("subject").value='';
document.getElementById("email").value='';
document.getElementById("phone").value='';
document.getElementById("message").value='';
},
error: function(response) {
grecaptcha.reset();
$("#con_msg").html('Try Again...');
}
});
}
</script>
<script src='https://www.google.com/recaptcha/api.js'></script>

Upvotes: 0

Mike Spear
Mike Spear

Reputation: 882

Here's some code to accompany @tzafar's answer:

var myCaptcha = null;
function prepCaptcha() {
    if (myCaptcha === null)
        myCaptcha = grecaptcha.render(document.getElementById('my-captcha'), {
            'sitekey': myCaptchaKey,
            'theme': 'light'
        });
    else
        grecaptcha.reset(myCaptcha);
}

In my case, my-captcha is the id of a div inside of a Bootstrap modal. I run prepCaptcha() in the event handler for the modal's shown.bs.modal event. The first time, it initializes the captcha. On subsequent shows of the modal, it resets it.

Also, note that you can quickly verify that you're getting a new captcha by printing the completed captcha's value:

console.log(grecaptcha.getResponse(myCaptcha));

You shouldn't see the same value twice.

Upvotes: 7

Waqleh
Waqleh

Reputation: 10161

I was able to do it just by using:

grecaptcha.reset();

Upvotes: 10

StaticVoid
StaticVoid

Reputation: 1537

Try calling the reload() function within ReCaptcha (version 1):

Recaptcha.reload();

How to Reload ReCaptcha using JavaScript?

Upvotes: 0

Marek Opatřil
Marek Opatřil

Reputation: 83

I had same problem with excelwebzone/recaptcha-bundle for Symfony2. Basicly is says that recaptcha was loaded in past to your DOM and placeholder that should be empty was full.

Those bundles dont have settings for explicit callbacks so you have to make sure that placeholder or even whole form is empty before you load recaptcha.

And mine was stuck in DOM cause i was loading it with AJAX. On second call it was there.

You can simply use $('#your-div-with-form').html('')

Upvotes: 0

Sara Khan
Sara Khan

Reputation: 335

if you are using new recaptcha 2.0 use this: for code behind:

ScriptManager.RegisterStartupScript(this, this.GetType(), "CaptchaReload", "$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});", true);

for simple javascript

<script>$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});</script>

Upvotes: 0

Dejan
Dejan

Reputation: 804

If you are using grecaptcha.render with jQuery, please ensure that you are actualy setting DOM element, instead of jQuery element:

This will work:

grecaptcha.render( $('.g-recaptcha')[0], { sitekey : 'your_key_here' });

but this wont:

grecaptcha.render( $('.g-recaptcha'), { sitekey : 'your_key_here' });

Upvotes: 8

Ghislaindj
Ghislaindj

Reputation: 1793

The method you are looking for is grecaptcha.reset()

However, in order for this function to work you have to render the reCaptacha explicitly like this : <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

Upvotes: 43

tzafar
tzafar

Reputation: 664

your recaptcha render js event should be called only once in the script, your recaptcha code is not valid if grecaptcha.render js event called second time in script. You should have to check your code so it should not call the grecaptcha.render function second time on validation check.

OR

In console, You will see a Uncaught ReferenceError: Recaptcha is not defined error message, which indicates the problem with the reCAPTCHA script. This is caused due to a bad url in the page - http://api.recaptcha.net/js/recaptcha_ajax.js . Google has updated the reCAPTCHA and moved the location of the script to http://www.google.com/recaptcha/api/js/recaptcha_ajax.js .

also check this post

http://www.instructables.com/id/Fix-reCAPTCHA-errors-on-Instructables/

and this post

Uncaught ReferenceError: Recaptcha is not defined

Upvotes: 3

Related Questions