Ângelo Rigo Ângelo Rigo - 5 months ago 18
jQuery Question

Google Recaptcha is not showing after click on radio button

I have two radio buttons. When I click into one of them to change the form fields, the captcha version 1 does not show anymore.

So, I have to click the refresh button to generate a new captcha image.

<input type="radio" name="data[Form][sv]" id="FormV1" value="1" /> V1
<input type="radio" name="data[Form][sv]" id="FormV2" value="2" checked="checked" /> V2


The jquery code is:

$(document).ready(function () {
$("#FormV1").bind("change", function (event) {
$.ajax({async:true,
beforeSend:function (XMLHttpRequest) {
$('#loading').show();
},
complete:function (XMLHttpRequest, textStatus) {$('#loading').hide()},
data:$("#FormularioSituacaoVeiculo1").closest("form").serialize(),
dataType:"html",
evalScripts:true,

success:function (data, textStatus) {
$("#search").html(data);},
type:"post",
url:"\/mysite\/theurl\/"});
return false;
});

$("#FormV2").bind("change", function (event) {
$.ajax({async:true,
beforeSend:function (XMLHttpRequest) {
$('#loading').show();
},
complete:function (XMLHttpRequest, textStatus) {
$('#loading').hide()
},
data:$("#FormV2").closest("form").serialize(),
dataType:"html", evalScripts:true, success:function (data, textStatus) {
$("#search").html(data);
},
type:"post",
url:"\/mysite\/url\/"});
return false;
});

function showRecaptcha(element) {
Recaptcha.create('hjfsdjklsdjklfsdjklfsdjklfjksdl', element, {
lang : 'en-gb',
theme : 'custom',
custom_theme_widget: 'recaptcha_widget',
callback: Recaptcha.focus_response_field
}
);
}

showRecaptcha('recaptcha_div');


How can I switch the form fields (V1 to V2) and generate the captcha automatically without having to click on the refresh button?

Today the captcha is not generated when I do click on the radio button. So I have to click on the refresh button to regenerate a captcha image.

Answer

Please check this working example (I have tried my best to make this example as close as possible to your situation):

$('input[name="data[Form][sv]"]').change(function(e) {
        $.ajax({
            async:true,
            beforeSend:function (XMLHttpRequest) {
                $('#loading').show();
            },
            complete:function (XMLHttpRequest, textStatus) {
                $('#loading').hide()
            },
            data: $(this).closest("form").serialize(),          
            evalScripts: true,
            success:function (data, textStatus) {
                $("#search").html(data);
                Recaptcha.reload();
            },
            dataType:"html",
            type:"POST",
            url:"https://httpbin.org/post"
        });
        return false;

});

function showRecaptcha(element) {
  Recaptcha.create('6Ld3TPkSAAAAAPckREYZuVQ6GtjMQsD-Q5CkzNxj', element, {
    lang: 'pt-BR',
    theme: 'white',
    custom_theme_widget: 'recaptcha_widget',
    //callback: Recaptcha.focus_response_field
  });
}

$(function () {
  showRecaptcha('recaptcha');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<div id="recaptcha"></div>

<h4>Radio Inputs: </h4>
<form>
  <input type="radio" name="data[Form][sv]" id="FormV1" value="1" /> V1
  <input type="radio" name="data[Form][sv]" id="FormV2" value="2" checked="checked" /> V2
</form>
<h4>Ajax Post Result <span style="display:none" id="loading">Loading...</span>: </h4>
<div id="search">

</div>