将锚的 src 属性值传递给 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

您将需要更新您的 html 并使用 jQuery（这就是我所知道的）。

首先，没有 href 属性和 title 属性的 a 标签不是有效的 html，它可以工作，但屏幕阅读器和爬虫将不知道它是什么。 如果您想使用 a 标签作为触发器，请考虑这种格式

<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 输入，我看到输入有一个城市 ID（我建议为其添加一个前缀，城市不是通用的，并且您可能会不小心瞄准另一个元素）。

现在是 jQuery

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

我们在这里所做的是在用户点击链接时定位点击，然后填充城市输入。

希望这会有所帮助 =]。

Answer 2

试试这个函数，将 #input 替换为 form id 的 id 并添加 class="toggle" data='Paris' (London,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>