如何使用javascript根据另一个字段值更改Contact 7表单字段值答案

【问题标题】：How change Contact 7 form field value depending on another field value with javascript如何使用javascript根据另一个字段值更改Contact 7表单字段值
【发布时间】：2021-02-09 18:20:42
【问题描述】：

如果用户在下拉字段中选择除访客个人资料以外的任何其他内容，我想要求用户输入他们的网站。

默认 URL 字段值为空。如果用户配置文件下拉选择是“访问者”，则侦听器将 url 字段设置为“https://example.com”，否则 url 设置为空以要求用户在发送表单之前输入 url。

请帮忙看看下面的代码：

无论用户配置文件选择什么，它始终默认为侦听器函数中的非访客。
如果用户选择非访问者，我测试将 url 设置为一些虚拟 https，但 url 字段值没有改变，这意味着我的代码也无法将 url 设置为特定值。

仅供参考 - 您会注意到使用 [group] 来隐藏/显示 Url 输入字段，按照 Contact Form 7 Conditional Fields 的外观隐藏/显示。

感谢您的帮助

[编辑] - 下面的工作代码。最终删除并使用 id: 来分配和使用变量。

Contact 7 Form -> 表单标签代码：

<div class="wpcf7-inline-wrapper">
<p class="wpcf7-inline-field">[text* your-firstname watermark "First Name"]</p>
<p class="wpcf7-inline-field">[text* your-lastname placeholder "Last Name"]</p>
</div>

<div class="wpcf7-inline-wrapper">
<p class="wpcf7-inline-field">[email* your-email "Email"] </p>
</div>

<div class="wpcf7-inline-wrapper">
<p class="wpcf7-inline-field">
<label id="dropDownProfile">
[select* your-profile id:dropDownProfile first_as_label "-- Choose Profile Type --" "Visitor" "Engineer"]
</label>
</p></div>

[group PortfolioWebsite]
<p class="wpcf7-inline-field">[url* your-url id:userWebsite] </p>
[/group]

<p>[textarea your-message "Message"] </p>

[submit class:btn class:btn-accent "Contact"]

<script>
document.getElementById("dropDownProfile").addEventListener("change", displayUrl);
function displayUrl() 
{
var currProfile=document.getElementById("dropDownProfile").value;
console.log(currProfile);
if (currProfile == "Visitor") 
    {
        document.getElementById("userWebsite").value = "https://dummyplaceholder.com";
} 
else 
    {
        console.log("at Exhibt");
        document.getElementById("userWebsite").value = "";
    }
}
</script>

【问题讨论】：

您的代码包含多个明显的错误，这让我相信您只是简单地复制和粘贴了其中的大部分内容，实际上并不了解 javascript DOM。首先，您需要在表单代码中使用与document.getElementById 中相同的 id。其次，它只是 element.value ，而不是 element.display.value

标签： javascript contact-form-7 contact-form

【解决方案1】：

仅供参考，我发现此链接是一个很好的起点https://www.codecanal.com/conditionally-display-fields-in-contact-form-7-with-simple-javascript/

最终没有使用分配/使用变量，而是使用 id：使用 getElementById("hereTheID").value 在侦听器处赋值

工作代码在问题中编辑

干杯

【讨论】：