單擊單選按鈕後，Google Recaptcha未顯示

Question

我有兩個單選按鈕。當我點擊其中一個來更改表單域時，驗證碼版本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至V 2），並且不必點擊刷新按鈕自動生成驗證碼？

今天當我單擊單選按鈕時，不會生成驗證碼。所以我必須點擊刷新按鈕重新生成驗證碼圖片。

Answer 1

請檢查該工作示例（我已經盡了最大的努力使這個例子儘可能接近您的情況）：

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

刷新代碼是你在找什麼？

爲V1：

Recaptcha.reload(); 

爲V2：

grecaptcha.reset();