Передать значение атрибута sr c якоря в поле CF7

Question

У меня есть три ссылки на главной странице

<a><img src="paris.jpg"></a>
<a><img src="london.jpg"></a>
<a><img src="NY.jpg"></a>

У меня есть текстовая форма CF7 с одним текстовым полем

[текст * класс города: заполнитель текста "Город"]

Форма появляется как всплывающее окно, когда пользователь нажимает на любую ссылку.

МОЯ ЦЕЛЬ

Когда я нажимаю на первое изображение, я хочу, чтобы слово "Лондон" появилось в поле формы контакта. Когда я нажимаю второй - Париж, когда я нажимаю третий - Нью-Йорк. Тогда пользователь может изменить информацию.

Как я могу это сделать? jQuery? JS? Пожалуйста, помогите.

Answer 1

попробуйте этот забавный c, замените # input на идентификатор вашего идентификатора формы и добавьте class = "toggle" data = 'Paris' (Лондон, NY ) атрибуты ваших изображений

const form = document.querySelector('#input')
const toggle = document.querySelectorAll('.toggle');
for (let i = 0; i < toggle.length; i++) {
  toggle[i].onclick = function () {
    console.log(this.getAttribute('data'));
    form.setAttribute("value", this.getAttribute('data'));
  }
}

<input type="text" id="input" />  

<a><img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-512.png" width="20px" class="toggle" data='Paris'></a>
<a><img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-512.png" width="20px" class="toggle" data='London'></a>
<a><img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-512.png" width="20px" class="toggle" data='NY'></a>

Answer 2

Вам нужно будет обновить html и использовать jQuery (это то, что я знаю).

Прежде всего, тег без атрибута href и атрибута title недействителен html, это будет работать, но программы чтения с экрана и сканеры не будут знать, что это такое. Если вы хотите использовать тег в качестве триггера, рассмотрите этот формат

<a href="javascript:void(0);" title="YOUR TITLE HERE">

Теперь для того, что вам нужно, я бы сделал что-то вроде этого

<a href="javascript:void(0);" class="popup-link" title="YOUR TITLE HERE" data-input-value="Paris">...</a>

Теперь, когда у нас есть ссылка с атрибут данных, который мы можем использовать для заполнения ввода контактной формы 7, я вижу, что у ввода есть идентификатор города (я бы предложил добавить к нему префикс, город не является универсальным c, и вы могли бы случайно выбрать другой элемент ).

Теперь для jQuery

jQuery('.popup-link').click(function(){
  jQuery('#city').val(jQuery(this).data('input-value'));
});

То, что мы здесь сделали, - это целевое нажатие, когда пользователь щелкает ссылку, а затем вводит городские данные.

надеюсь, это поможет =].