将锚的 src 属性值传递给 CF7 的字段

Posted 2023-05-09

【中文标题】将锚的 src 属性值传递给 CF7 的字段

【英文标题】：Pass anchor's src attribute value to field of CF7

【发布时间】：2020-07-14 13:34:10

【问题描述】：

我在主页上有三个链接

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

我有一个带有一个文本字段的文本表单 CF7

[文本*城市类：文本占位符“城市”]

当用户点击任何链接时，表单显示为弹出窗口。

我的目标

当我点击第一张图片时，我希望“伦敦”一词出现在联系表格的字段中。当我点击第二个 - 巴黎，当我点击第三个 - 纽约。然后用户可以更改信息。

我怎么能这样做？ jQuery？ JS？请帮忙。

【问题讨论】：

使用按钮进行动作行为。 Anchors should only be used for navigation.

关于您的问题...您尝试了什么？希望您努力并询问您遇到的具体问题。

【参考方案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'));
);

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

希望这会有所帮助 =]。

【讨论】：

谢谢。我应该添加这段代码 jQuery('.popup-link').click(function() jQuery('#city').val(jQuery(this).data('input-value')); );到页眉？

您需要在加载 jQuery 后添加此代码，如果没有 jQuery 文件，这将无法工作。 Wordpress 带有一个已经加载的 jQuery 文件。如果你有一个排队的 js，你可以把它放在那里。如果没有，您可以创建一个。如果这不可能，您可以在主题的 footer.php 中添加此脚本，只需确保在 wp_footer() 之后添加它，并且不要忘记将代码包装在脚本标签中，并确保您不要'不要在 php 标签内插入代码

对于 HTML5，锚点不需要 href 属性，它们也不应该用作按钮。请改用按钮元素。

【参考方案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/***-512.png"  class="toggle" data='Paris'></a>
<a><img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/***-512.png"  class="toggle" data='London'></a>
<a><img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/***-512.png"  class="toggle" data='NY'></a>

【讨论】：

谢谢。我应该在

in 下面的表单和输入或在外部 JS 文件中不需要 JQERY lib，只需要普通 JS

您的代码有效，但仅当我使用标准 时。当我使用 CF7 时，我遇到了问题，无法正常工作。有想法吗？

什么返回控制台？

表单输入的代码是什么？班级？ ID？ <input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false">