Google Recaptcha non viene visualizzato dopo aver fatto clic sul pulsante di opzione

Question

Ho due pulsanti di opzione. Quando faccio clic su uno di essi per modificare i campi del modulo, la versione 1 del captcha non viene più visualizzata.

Quindi, devo fare clic sul pulsante di aggiornamento per generare una nuova immagine captcha.

<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 

Il codice jQuery è:

$(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'); 

Come posso cambiare i campi del modulo (V1 a V2) e generare il captcha automaticamente senza dover fare clic sul pulsante di aggiornamento?

Oggi il captcha non viene generato quando faccio clic sul pulsante di opzione. Quindi devo cliccare sul pulsante di aggiornamento per rigenerare un'immagine captcha.

Answer 1

Si prega di verificare questo esempio di lavoro (Ho fatto del mio meglio per rendere questo esempio il più vicino possibile alla vostra situazione):

$('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>

Answer 2

codici Refresh sono quello che stai cercando?

per v1:

Recaptcha.reload(); 

per V2:

grecaptcha.reset();