顯示輸入字段一旦降下來的聯繫表格中選擇7

嗨，大家好，我使用WordPress的聯繫表7插件，並努力實現：顯示文本字段，如果下拉「其他」選擇顯示輸入字段一旦降下來的聯繫表格中選擇7

我使用通過WordPress的頁面視覺作曲家以下原料JS現在在聯繫表格添加dropdown作爲ID後7：

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

來源

2016-01-20 Bilal Naseer

可能的重複[顯示錶單字段，如果下拉項目使用jQuery選擇]（http://stackoverflow.com/questions/18088381/show-form-field-if-drop-down-item-is-selected-使用-jquery） –

正如我所提到的，我正在使用聯繫表格7（Wordpress插件），我無法控制HTML的聯繫表格 –

https://wordpress.org/support/topic/plugin-contact-form-7 - 這是如何使用showquide-fields-with-jquery –

爲尋找一個簡單的解決方案。在聯繫表單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。

來源

2017-08-12 21:08:11

顯示輸入字段一旦降下來的聯繫表格中選擇7

回答

相關問題