CAPTCHA с возможностью обновления без перезагрузки страницы в 1C-Битрикс

Просмотров: 555

Задача: Так как стандартная капча в 1С-Битрикс, может отобразиться не удачно (символы уходят за грань капчи или не удачно накладываются друг на друга), нужно дать пользователю возможность обновить ее, без перезагрузки страницы.

Обновляемая CAPTHCA в 1C-Битрикс

Обновление CAPTHCA с помощью js

Для реализации данной функциональности необходимо модифицировать код компонента, использующего CAPTCHA, следующим образом:

/* CAPTHCA */
if ($arResult["CAPTCHA_CODE"] <> ''):
    ?>
   <input 
        type="hidden" 
        name="captcha_code" 
        value="<?= $arResult["CAPTCHA_CODE"] ?>⁠"/>⁠
    <img 
        id="captcha_image" 
        src="/bitrix/tools/captcha.php?captcha_sid=<?= $arResult["CAPTCHA_CODE"] ?>⁠">⁠
    <small>⁠Нажмите на картинку, что бы обновить</small>⁠
    <input 
        type="text" 
        size="30" 
        name="captcha_word" 
        tabindex="<?= $tabIndex++; ?>⁠"
        placeholder="Символы с картинки" 
        autocomplete="off"/>⁠
    <script>⁠
        document.addEventListener('DOMContentLoaded', function () {
            var captchaImage = document.getElementById('captcha_image');
            if (captchaImage) {
                captchaImage.addEventListener('click', function () {
                    // Генерация случайного числа, чтобы избежать кеширования изображения
                    var randomNum = Math.random();
                    var newSrc = '/bitrix/tools/captcha.php?captcha_sid=<?= $arResult["CAPTCHA_CODE"] ?>⁠&' + randomNum;
                    captchaImage.src = newSrc;
                });
            }
        });
    </script>
<?
endif;
/* end CAPTHCA */

Этот код добавляет JavaScript, который регистрирует событие "click" на изображении CAPTCHA. В случае клика, генерируется случайное число (randomNum) для избежания кеширования изображения. Затем формируется новый URL с уникальным идентификатором CAPTCHA (newSrc). Новый URL присваивается свойству src изображения, что приводит к его обновлению.

Перетащите файлы
Ничего не найдено
Нажимая кнопку "Отправить" вы соглашаетесь
с политикой конфиденциальности и обработки персональных данных.