Перейти к содержанию

Чекбокс согласия на обработку персональных данных (скрипт, стилизация)


Pascha
 Поделиться

Рекомендуемые сообщения

Теперь всегда нужно чтоб на вашем сайте в любой форме обратной связи присутствовал чекбокс  согласия на обработку персональных данных.
Зачастую разработчики уже предусматривают данную приблуду в своих дополнениях... но что если нет? Что если для Вас проблематично поменять код самого модуля по каким то причинам? 
Самое простое- вставить несложный скрипт и сделать пару правок.
Вот этим мы и займемся. 
Итак... мы открыли код вывода формы обратной связи и ориентируясь на кнопку кода отправки сообщения:
как правило это кнопка (ссылка или button )

type="submit" 

*можно использовать для поиска по документу.

Где то чуть выше вставляем

<div class="form-chek">
<input type="checkbox" id="politics" onclick="check();" value="" autocomplete="off"/>
Я согласен (-на) на обработку персональных данных
</div>

тем самым мы сделали то что требуется....

01.png.7aeeeaf57030a2834d33766adc723e83.png


но... 
отправка сообщения возможна что при активном чекбоксе, что при неактивном.... 
"факир был пьян- и фокус не удался" ))))

Потому мы еще не закончили и поработаем с самой кнопкой отправки сообщения из формы

к примеру мы имеем 

<button type="submit" class="btn btn-lg btn-primary">Оставить заявку</button>

чуть видоизменим ее на 

<button type="submit" name="submit" class="submit btn btn-lg btn-primary" disabled="">Оставить заявку</button>

и вставим скрипт

<script>
function check() {
var submit = document.getElementsByName('submit')[0];
if (document.getElementById('politics').checked)
submit.disabled = '';
else
submit.disabled = 'disabled';
}
</script>	

тем самым... пока чекбокс не активен - кнопка отправки сообщений так же не кликабельна...

02.png.7fb0042c97d603b36c8f19414e17f423.png

 

и при активном/отмеченном чекбоксе кнопка отправки становится работоспособной...

 

03.png.84d5f32f1fbe73e95067594674890138.png

казалось бы мы уже можем остановиться на этом)))
но....
есть и другие задачи: 
к примеру такие, как стилизовать собственно чекбокс под дизайн сайта ( по умолчанию активный чекбокс - синего цвета ( так его определяют браузеры и подтягивают стандартные стили)
исправим это недоразумение одной строчкой 

#politics {
    accent-color: #FFCB4A;
}

и вот она уже стала того цвета что нам требовалось.

04.png.47a5fb486fac05de3352f7a909a55363.png

 

Ссылка на комментарий
Поделиться на другие сайты

  • 7 месяцев спустя...

Добрый день. А если на одной странице есть 2 формы, то на одной перестает работать скрипт

Ссылка на комментарий
Поделиться на другие сайты

4 часа назад, Алексей Костюк сказал:

Добрый день. А если на одной странице есть 2 формы, то на одной перестает работать скрипт

обратите внимание на "обертку" 
 

if (document.getElementById('politics').checked)

то есть  блок к примеру в

<input type="checkbox" id="politics" onclick="check();" value="" autocomplete="off"/>



а второй блок к примеру в

<input type="checkbox" id="politicform" onclick="check();" value="" autocomplete="off"/>


и вот Вам новая идея прописать скрипт для politicform

<script> 
  function check() { var submit = document.getElementsByName('submit')[0]; 
     if (document.getElementById('politicform').checked) 
        submit.disabled = ''; 
         else 
        submit.disabled = 'disabled'; } 
</script>

либо еще проще
 

<script> 
function check() {
var submit = document.getElementsByName('submit')[0];
var notChecked = false;
if (!document.getElementById('politics').checked) notChecked = true;
if (!document.getElementById('politicform').checked) notChecked = true;
if(!notChecked) submit.disabled = '';
else
submit.disabled = 'disabled';
}
</script> 

 

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

 Поделиться

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...