telephone-icon+38(063)606-25-95
Main menu
ГлавнаяБлогJavaScriptAJAXОбновление CAPTCHA без перезагрузки страницы

Обновление CAPTCHA без перезагрузки страницы

Обновление 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.

ВКонтакт Facebook Google Plus Одноклассники Twitter Livejournal Liveinternet Mail.Ru

Комментарии

  1. Давно уже хотел обновит свой коммент но времени не было и хотел сказать что статья очень очень полезная но тут есть пару тонкости если в веб формах вы будете ставить ajax о котором автор не упомянул, а так как это может в будущем кому то понадобится я решил прокомментировать про них. Тут аjax играет важную роль в всплывающих окнах :  после нажатие кнопки отправит окно закроется и что бы оно не закрыло здесь ставится ajax проверка так как просто включение режима ajax не поможет.
    1.Когда ставите 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>    

    Автор: Мухаммад Создано:
  2. 1.Можете уточнит где именно id="refresh_captcha" пишется?
    2.Это в веб форме используется или форма обратной связи?

    Можете код с версткой  тоже добавит как пример.  

    Автор: Мухаммад Создано:

Возврат к списку