Google Recaptcha не отображается после нажатия на переключатель
У меня есть два переключателя. Когда я нажимаю на один из них, чтобы изменить поля формы, капча версии 1 больше не отображается.
Итак, я должен нажать кнопку обновить, чтобы создать новое изображение капчи.
<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
Код 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');
Как я могу переключить поля формы (V1 на V2) и автоматически генерировать капчу, не нажимая на кнопку Обновить?
Сегодня капча не генерируется, когда я нажимаю на переключатель. Так Что Я нужно нажать на кнопку обновить, чтобы восстановить изображение капчи.
2 ответов:
Пожалуйста, проверьте этот рабочий пример (я постарался сделать этот пример как можно ближе к вашей ситуации):
$('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>
Comments