在联系表 7 中选择下拉菜单后显示输入字段

Posted 2023-03-05

【中文标题】在联系表 7 中选择下拉菜单后显示输入字段

【英文标题】：show input field once drop down is selected in Contact Form 7

【发布时间】：2016-04-26 08:15:54

【问题描述】：

大家好，我正在使用 Wordpress Contact Form 7 插件并尝试实现：如果选择下拉“其他”则显示文本字段

在联系表格 7 中添加 dropdown 作为 id 后，我现在通过 Wordpress 页面中的 Visual composer 使用以下原始 JS：

var x = document.getElementById("dropdown");
if(x.value = "Other") 
 alert('Enter your js here!');

【问题讨论】：

Show Form Field if Drop Down Item is Selected Using jquery的可能重复

正如我所提到的，我使用的是联系表格 7（Wordpress 插件），我无法控制联系表格的 html

wordpress.org/support/topic/…

是的，谢谢 Lalji

【参考方案1】：

适合任何寻求更简单解决方案的人。在联系表格 7 中，您可以简单地添加内联 javascript。

只要您不在脚本中添加空行，添加到表单构建器的 JavaScript 就会在前端呈现。

这是来自 CF7 表单编辑器的副本：

<label> Your Name (required)
[text* your-name] </label>

<label> Your Email (required)
[email* your-email] </label>

<label> Your Favorite Color
[select drop-down-menu id:FavoriteColorDropDown "Pink" "Red" "Purple" "Other"] </label>

<label id="EnterFavoriteColorLabel"> Please Specify Your Favorite Color
[text favorite-color] </label>

[submit "Send"]

<script language="javascript" type="text/javascript">
// Hide the favorite-color text field by default
document.getElementById("EnterFavoriteColorLabel").style.display = 'none';
// On every 'Change' of the drop down with the ID "FavoriteColorDropDown" call the displayTextField function
document.getElementById("FavoriteColorDropDown").addEventListener("change", displayTextField);
  function displayTextField() 
    // Get the value of the selected drop down
    var dropDownText = document.getElementById("FavoriteColorDropDown").value;
    // If selected text matches 'Other', display the text field.
    if (dropDownText == "Other") 
      document.getElementById("EnterFavoriteColorLabel").style.display = 'block';
     else 
      document.getElementById("EnterFavoriteColorLabel").style.display = 'none';
    
  
</script>

希望对您有所帮助。

如果您有兴趣阅读更多或扩展单选按钮的内容，我最近发表了一篇文章，其中包含更多代码示例和示例here。