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

问题描述

如果用户在下拉字段中选择除“访问者”个人资料之外的其他任何内容，我希望用户进入他们的网站。

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

请帮助以下代码：

无论选择哪种用户配置文件，在侦听器功能中始终默认为“非访问者”。
如果用户选择“非访问者”，则我测试了将URL设置为一些虚拟https，但url字段值没有变化，这意味着我的代码也无法将url设置为特定值。

仅供参考-您会注意到[group]用于根据Contact Form 7 Conditional Fields隐藏/显示“网址”输入字段，从外观上隐藏/显示。

感谢您的帮助

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

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

<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>

解决方法

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

最终不使用分配/使用变量，而是使用id：使用getElementById（“ hereTheID”）。value

在侦听器中分配

在问题中编辑了工作代码

欢呼

contact-form contact-form-7 javascript