Question

我正在使用Contact Form 7 Wordpress插件创建一个表单。我想根据相同格式的下拉菜单中的用户选项自动将值分配给文本字段

我已经尝试过使用此表单标签和下面的内联代码，但未成功。关于我在做什么错的任何建议吗？

<script language="javascript" type="text/javascript">
// 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;
    switch (dropDownText){
    case pink:
      	document.getElementById("EnterFavoriteColorLabel").value = "pink";
    	break;
    case red:
      	document.getElementById("EnterFavoriteColorLabel").value = "red";
    	break;
    case purple:
      	document.getElementById("EnterFavoriteColorLabel").value = "purple";
    	break; 
    }
  }
</script>

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

Answer 1

由于我无法想象HTML的生成方式，因此我建议首先确保调用displayTextField方法。如何更改这样获得值的方式（您可能必须根据生成html的框架的上下文来更改代码）：

document.getElementById("FavoriteColorDropDown").addEventListener("change", displayTextField(this.value))
const displayTextField = val => {
    // Get the value of the selected drop down
    const dropDownText =  val
    // bla bla blah...
  }

此外，如果您可以按照建议将if替换为switch，并且变量为const，则代码也不会太混乱。

如何在CF7中基于下拉选项更改文本字段的值

1 个答案: