Смена значения выпадающего списока по нажатию кнопки
Модификация для Tilda. Выбор нужного пункта в выпадающем списке формы при нажатии на кнопку товара/услуги.
Кейс использования
Модификация подойдет, если у вас несколько тарифных планов и вы не хотите делать миллиард popup форм. Вы можете сделать одну форму и пользователю не придется переключать значения выпадающего списка по нескольку раз.
Пример работающей модификации
Хей! Привет!
Мы рады, что ты тыркнул на кнопочку.
Инструкция по внедрению модификации
1
Добавляем блок с тарифами
Можно выбрать как стандартный блок, так и Zeroblock.
Если делаешь через Zero, то лучше добавь нужным кнопкам кастомные классы и сделай так чтобы элементы шли по порядку в структуре.
Если делаешь через Zero, то лучше добавь нужным кнопкам кастомные классы и сделай так чтобы элементы шли по порядку в структуре.
2
Называем тарифы
Даем название отдельным тарифам так чтобы такие же названия вписать в выпадающий список
3
Создаем форму
Создаем форму через стандартные блоки или Zero. Задаем класс блоку с формой.
4
Создаем выпадающий список
В форме делаем выпадающий список, задаем варианты в соответствии с названиями тарифов (можно добавить и прочие) и даем ему имя переменной.
5
Вставляем код
Добавляем код модификации в блок T123
6
Добавляем переменный
Переходим в код и вставляем нужные значения без точек.
Если не знаете какой класс кнопки и заголовков, то переходим в инспектор кода и берем классы оттуда.
Если не знаете какой класс кнопки и заголовков, то переходим в инспектор кода и берем классы оттуда.
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
//Названия классов
let tariffBlockClass = 'uc-tariffs_block'; //класс блока с тарифами
let titleClass = 't-card__title'; //класс заголовка
let btnClass = 't-card__link'; //класс кнопки
let popClass = 'uc-pop_tariff'; //класс блока с попапом
let selectName = "tariff"; //имя переменной выпадающего списка
funcListByBTN(tariffBlockClass, titleClass, btnClass, popClass, selectName);
})
function funcListByBTN (blockClass, titlesClass, btnsClass, popClass, selectName) {
let block = document.querySelector('.' + blockClass);
let titles = block.querySelectorAll('.' + titlesClass);
let btns = block.querySelectorAll('.' + btnsClass);
let selectPop = document.querySelector('.' + popClass).querySelector('[name='+ selectName +']');
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', () => {
selectPop.value = titles[i].innerHTML.replace(/[^a-zA-Z ]/g, "");
})
}
}
</script>Как вам модификация?