javascript - Google Recaptcha is not showing after click on radio button - Stack Overflow

admin管理员组

文章数量:1287630

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();
        }, 
        plete: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();
}, 
    plete: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.

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();
        }, 
        plete: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();
}, 
    plete: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.

• javascript
• jquery
• recaptcha
• cakephp-2.3

Share Improve this question Follow edited Jul 6, 2016 at 4:45 Morshedul Arefin 1,5381616 silver badges2525 bronze badges asked Jun 24, 2016 at 19:51 Ângelo RigoÂngelo Rigo 2,1491010 gold badges4040 silver badges7373 bronze badges 10

• can you create a JSFiddle to check it? Thanks. – Gerard Cuadras Commented Jun 29, 2016 at 11:34
• Do you have any errors in your console? Have you debugged it at all? – krillgar Commented Jun 29, 2016 at 11:54
• Also you should probably post the html you're using, or just add it to the fiddle per @GerardCuadras – n_i_c_k Commented Jun 29, 2016 at 11:56
• Following the documentation of google recaptcha (developers.google./recaptcha/docs/display) you can reset the recaptcha by "grecaptcha.reset()" - but the recaptcha described there looks different to what you posted - can you please provide more information about the used recaptcha - and in ideal world a jsfiddle? – Martin Ackermann Commented Jun 29, 2016 at 12:16
• Hi i do provide a fiddle with the generated HTML into jsfiddle/9fngba56 it is not a full working fiddle but you can see the structure aplyed – Ângelo Rigo Commented Jun 29, 2016 at 12:21

 |  Show 5 more ments

2 Answers 2

Sorted by: Reset to default 11 +50

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();
    },
    plete: 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/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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.google./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>

Refresh codes are what you are looking for?

for v1:

Recaptcha.reload(); 

for v2:

grecaptcha.reset();

本文标签： javascriptGoogle Recaptcha is not showing after click on radio buttonStack Overflow