Обновление CAPTCHA без перезагрузки страницы
Ничего сложного в этом нет. Для начала необходимо в шаблоне компонента, где используется CAPTCHA, добавить ссылку обновления и прописать ей id="refresh_captcha", для картинки капчи прописать id="captcha_img", для скрытого инпута с сидом капчи id="captcha_sid". Теперь можно обращаться к этим элементам со скрипта.
Создадим файл refresh_captcha.php, куда будем обращаться за новой капчей, со следующим содержимым:
<? require_once($_SERVER["DOCUMENT_ROOT"] . "/bitrix/modules/main/include.php"); echo CMain::CaptchaGetCode(); ?>
Обновляем капчу скриптом:
$(document).ready(function() {
$('#refresh_captcha').click(function(){
$.get('/ajax/refresh_captcha.php', function(data) {
$('#captcha_img').attr('src','/bitrix/tools/captcha.php?captcha_sid='+data);
$('#captcha_sid').val(data);
});
return false;
});
});
Можно сделать проверку капчи аналогичным путем. Для этого создаем файл check_captcha.php со следующим содержимым:
<?
require_once($_SERVER["DOCUMENT_ROOT"] . "/bitrix/modules/main/include.php");
if($_POST['action']=='check_captcha' && strlen($_POST['captcha_sid'])>0 && strlen($_POST['captcha_word'])>0){
include_once($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/classes/general/captcha.php");
$captcha_code = $_POST["captcha_sid"];
$captcha_word = $_POST["captcha_word"];
$cpt = new CCaptcha();
$captchaPass = COption::GetOptionString("main", "captcha_password", "");
if ($cpt->CheckCodeCrypt($captcha_word, $captcha_code, $captchaPass)) echo 'OK';
else echo 'ERROR';
}else echo 'ERROR';
?>
и добавляем скрипт проверки:
$(document).ready(function() {
$('#some_button').click(function(){
var sid = $('#captcha_sid').val();
var word = $('#captcha_word').val();
$.post("/inc/solutions/check_captcha.php", {action: 'check_captcha', captcha_sid: sid, captcha_word: word}, function(data){
if(data.length>0){
if(data=='OK'){//если капча верно
$.get('/ajax/refresh_captcha.php', function(data) {
$('#captcha_img').attr('src','/bitrix/tools/captcha.php?captcha_sid='+data);
$('#captcha_sid').val(data);
});
}else if(data=='ERROR'){//если капча неверно
$.get('/ajax/refresh_captcha.php', function(data) {
$('#captcha_img').attr('src','/bitrix/tools/captcha.php?captcha_sid='+data);
$('#captcha_sid').val(data);
});
}
}
});
return false;
});
});
ВАЖНО: После проверки капчи её необходимо обновить, для этого прописаны строки 8-11, 13-16.
Комментарии (2)
Давно уже хотел обновит свой коммент но времени не было и хотел сказать что статья очень очень полезная но тут есть пару тонкости если в веб формах вы будете ставить ajax о котором автор не упомянул, а так как это может в будущем кому то понадобится я решил прокомментировать про них. Тут аjax играет важную роль в всплывающих окнах : после нажатие кнопки отправит окно закроется и что бы оно не закрыло здесь ставится ajax проверка так как просто включение режима ajax не поможет.
15 октября, 2016 в 15:471.Когда ставите id как автор писал добавьте еще id="captcha_word" к капча и id="some_button" к кнопке и кроме этого еще хотел сказать не нужно использовать свойству капча из вашей формы так как проверка капчы формы не будет на айаксе работать. Можно просто вызвать эту капчу в коде и посадит этот код на форму в итоге примерно такой код у вас должно получится:
<?
$arResult["CAPTCHA_CODE"] = htmlspecialchars($GLOBALS["APPLICATION"]->CaptchaGetCode());
//вызываем капчу
?>
<tr>
<td class="capcha_text"><div id="question" class="a1">Введите капчу</a></td>
<td>
<input id="captcha_word" type="text" name="captcha_word" size="30" maxlength="50" value="" class="inputtext" />
</td>
</tr>
<tr>
<td>
<input id="captcha_sid" type="hidden" name="captcha_sid" value="<?=$arResult["CAPTCHA_CODE"]?>" />
<img id="captcha_img" src="/bitrix/tools/captcha.php?captcha_sid=<?=$arResult["CAPTCHA_CODE"]?>" width="180" height="40" align="right"/></td>
</tr>
2.Наш путь к refresh_captcha.php и check_captcha.php должно быт указано правильно.
К примеру можно их ставить сразу в корне после wwww/refresh_captcha.php и wwww/check_captcha.php. Тогда javascript коде должны написать:
<script>
$(document).ready(function() {
$('#refresh_captcha').click(function(){
$.get('/refresh_captcha.php', function(data) {
//на предыдущей строке написали правильный пут
$('#captcha_img').attr('src','/bitrix/tools/captcha.php?captcha_sid='+data);
$('#captcha_sid').val(data);
});
return false;
});
});
</script>
3.Не надо обновлять капчу если она верно как писал автор.Например у меня форма называется SIMPLE_FROM_1. Если капча верно то форма отправится а если нет то перезагрузиться изображение капчи и текст будет принимать красный цветь. Можно было других условий поставит если капча не верно но это уже все на javascript и от вас зависит.
<style>
.a1{
color:black;
}
.a2{
color:red;
}
<style>
<script>
$(document).ready(function() {
$('#some_button').click(function(){
var sid = $('#captcha_sid').val();
var word = $('#captcha_word').val();
$.post("/check_captcha.php", {action: 'check_captcha', captcha_sid: sid, captcha_word: word}, function(data){
if(data.length>0){
if(data=='OK'){//если капча верно
SIMPLE_FORM_1.submit();
}
else if(data=='ERROR'){//если капча неверно
document.getElementById("question").className = "a2";
$.get('/ajax/refresh_captcha.php', function(data) {
$('#captcha_img').attr('src','/bitrix/tools/captcha.php?captcha_sid='+data);
$('#captcha_sid').val(data);
});
}
});
return false;
});
});
</script>
1.Можете уточнит где именно id="refresh_captcha" пишется?
05 октября, 2016 в 21:582.Это в веб форме используется или форма обратной связи?
Можете код с версткой тоже добавит как пример.